Cannot access value using "document.f.33"

Question

I am trying to use the following script to fill the html form. I do not understand why I get the following error: Uncaught SyntaxError: missing ) after argument list. For some reason I can not get this to work with the change of name=n33 to 33 for example..

Example: It works in this way:

33:

But it wont work in this way:

33:

What am I doing wrong?

Script:

Professor Abronsius · Accepted Answer

As per the comment above regarding using dataset attributes as opposed to numeric names/ids I cobbled together a demo showing roughly how you could use these data-name attributes. Due to the fact that the roulette table image specified does not exist I had to tweak the css and other things to see what was going on when moving the mouse but the selection of items seems to work OK.

// to avoid any possible ambiguity use the full path to the element - ie: document.forms.f
// These functions now call the utility function `q` to find elements
function addRed(el){
  el=q( el );
  el.value=parseInt( document.forms.f.chip.value ) + parseInt(el.value);
  el.style.backgroundColor='red';
}
function addBlack(el){
  el=q( el );
  el.value=parseInt( document.forms.f.chip.value ) + parseInt(el.value);
  el.style.backgroundColor='black';
  el.style.color='white';
}
function add(el){
  el=q( el );
  el.value=parseInt( document.forms.f.chip.value ) + parseInt( el.value );
  el.style.backgroundColor='lightgreen';
  el.style.color='black';
}



function chip(size){
  document.forms.f.chip.value = size;
}
function roll(){
  document.forms.f.button.click();
}



/* Find element by either data-name attribute or regular name attribute */
const q=(s)=>{
  return document.forms.f.querySelector( '[data-name="'+s+'"]' ) || document.forms.f.querySelector( '[name="'+s+'"]' )
}







/*
  Purely so that I could identify where on the image map the cursor was active
  - might be useful but it is crudely hacked together. This will highlight the
  number(bet) according to where the mouse is over the table.
*/
const mouseoverhandler=(e)=>{
  e.preventDefault();
  if( e.target != e.currentTarget ) {
    let match=e.target.getAttribute('onclick').match(/('(\w+)')/gi);
    if( match ){
      let p=match[0].replace(/\'/gi,'');
      let node=q(p);
      if( node )node.parentNode.classList.add('highlight')
    }      document.getElementById('bet').textContent=e.target.getAttribute('onclick')
  }
};
const mouseouthandler=(e)=>{
  e.preventDefault();
  document.forms.f.querySelectorAll('label.highlight').forEach( n => n.classList.remove('highlight') );
  document.getElementById('bet').textContent='';
};
document.addEventListener('DOMContentLoaded',()=>{
  document.querySelector('map').addEventListener( 'mouseover', mouseoverhandler )
  document.querySelector('map').addEventListener( 'mouseout', mouseouthandler )         
});

body{width:100%;height:100vh;padding:0;margin:0;box-sizing:border-box;font-family:monospace}
area{cursor:pointer}
form{width:100%;height:100vh;}
img{margin:2rem 0 0 0;}
label{ float:left; clear:both; padding:0.2rem; margin:0.1rem; border:1px solid transparent; width:120px; }
label input{ float:right}
.submit{ padding:1rem; width:130px }
.highlight{border:1px solid green;background:rgba(0,255,0,0.1) }
#bet{ display:block; height:2rem; clear:both; margin:0 1rem; width:100%;}

Cannot access value using "document.f.33"

Answers (1)

Related Questions

Cannot access value using &quot;document.f.33&quot;

Answers (1)

Related Questions

Cannot access value using "document.f.33"