javascript - 无法使用“document.f.33”访问值
问题描述
我正在尝试使用以下脚本来填写 html 表单。我不明白为什么会出现以下错误：Uncaught SyntaxError: missing ) after argument list。出于某种原因，例如，将 name=n33 更改为 33 时，我无法使用它。
示例：它以这种方式工作：
<area shape="rect" onclick="addBlack(document.f.n33)" coords="378,404,420,437">
33: <input type="text" name="n33" size="4" value="0" readonly="">
但它不会以这种方式工作：
<area shape="rect" onclick="addBlack(document.f.33)" coords="378,404,420,437">
33: <input type="text" name="33" size="4" value="0" readonly="">
我究竟做错了什么？
脚本：
<script>
function addRed(el){
var amount = parseInt(document.f.chip.value);
i = parseInt(el.value);
i = parseInt(amount) + i;
el.value=i;
el.style.backgroundColor='red';
}
function addBlack(el){
var amount = parseInt(document.f.chip.value);
i = parseInt(el.value);
i = parseInt(amount) + i;
el.value=i;
el.style.backgroundColor='black';
el.style.color='white';
}
function add(el){
var amount = parseInt(document.f.chip.value);
i = parseInt(el.value);
i = parseInt(amount) + i;
el.value=i;
el.style.backgroundColor='lightgreen';
el.style.color='black';
}
function chip(size){
document.f.chip.value = size;
}
function roll(){
document.f.button.click();
}
</script>
<map name="roulette_table.map">
<area shape="circle" onclick="roll()" coords="102,103,102">
<area shape="circle" onclick="chip(100000)" coords="152,440,34">
<area shape="circle" onclick="chip(10000)" coords="62,439,33">
<area shape="circle" onclick="chip(1000)" coords="152,347,34">
<area shape="circle" onclick="chip(100)" coords="59,347,33">
<area shape="circle" onclick="chip(10)" coords="153,255,36">
<area shape="circle" onclick="chip(1)" coords="62,254,34">
<area shape="rect" onclick="add(document.f.row3)" coords="253,332,285,470">
<area shape="rect" onclick="add(document.f.row2)" coords="253,191,284,329">
<area shape="rect" onclick="add(document.f.row1)" coords="253,49,284,189">
<area shape="rect" onclick="add(document.f.col3)" coords="378,474,421,505">
<area shape="rect" onclick="add(document.f.col2)" coords="333,475,375,505">
<area shape="rect" onclick="add(document.f.col1)" coords="289,474,329,505">
<area shape="rect" onclick="add(document.f.nine)" coords="212,403,249,471">
<area shape="rect" onclick="add(document.f.one)" coords="213,47,249,119">
<area shape="rect" onclick="add(document.f.odd)" coords="212,333,249,402">
<area shape="rect" onclick="add(document.f.even)" coords="212,121,250,189">
<area shape="rect" onclick="addBlack(document.f.black)" coords="212,261,250,330">
<area shape="rect" onclick="addRed(document.f.red)" coords="212,191,249,258">
<area shape="rect" onclick="addRed(document.f.36)" coords="378,439,420,471">
<area shape="rect" onclick="addBlack(document.f.35)" coords="332,438,374,471">
<area shape="rect" onclick="addRed(document.f.34)" coords="288,438,330,470">
<area shape="rect" onclick="addBlack(document.f.33)" coords="378,404,420,437">
<area shape="rect" onclick="addRed(document.f.32)" coords="331,403,374,436">
<area shape="rect" onclick="addBlack(document.f.31)" coords="288,403,329,436">
<area shape="rect" onclick="addRed(document.f.30)" coords="378,369,420,401">
<area shape="rect" onclick="addBlack(document.f.29)" coords="333,368,375,400">
<area shape="rect" onclick="addBlack(document.f.28)" coords="288,368,330,400">
<area shape="rect" onclick="addRed(document.f.27)" coords="378,333,420,366">
<area shape="rect" onclick="addBlack(document.f.26)" coords="332,333,375,365">
<area shape="rect" onclick="addRed(document.f.25)" coords="288,332,330,366">
<area shape="rect" onclick="addBlack(document.f.24)" coords="378,297,420,330">
<area shape="rect" onclick="addRed(document.f.23)" coords="332,297,374,329">
<area shape="rect" onclick="addBlack(document.f.22)" coords="288,297,330,329">
<area shape="rect" onclick="addRed(document.f.21)" coords="378,263,420,296">
<area shape="rect" onclick="addBlack(document.f.20)" coords="332,262,375,295">
<area shape="rect" onclick="addRed(document.f.19)" coords="288,262,330,295">
<area shape="rect" onclick="addRed(document.f.18)" coords="378,226,421,260">
<area shape="rect" onclick="addBlack(document.f.17)" coords="332,227,375,261">
<area shape="rect" onclick="addRed(document.f.16)" coords="288,227,329,260">
<area shape="rect" onclick="addBlack(document.f.15)" coords="378,191,420,224">
<area shape="rect" onclick="addRed(document.f.14)" coords="332,191,375,224">
<area shape="rect" onclick="addBlack(document.f.13)" coords="288,191,329,224">
<area shape="rect" onclick="addRed(document.f.12)" coords="378,155,420,189">
<area shape="rect" onclick="addBlack(document.f.11)" coords="332,156,374,189">
<area shape="rect" onclick="addBlack(document.f.10)" coords="288,156,329,189">
<area shape="rect" onclick="addRed(document.f.9)" coords="378,121,420,153">
<area shape="rect" onclick="addBlack(document.f.8)" coords="332,121,375,153">
<area shape="rect" onclick="addRed(document.f.7)" coords="288,120,329,152">
<area shape="rect" onclick="addBlack(document.f.6)" coords="378,85,420,118">
<area shape="rect" onclick="addRed(document.f.5)" coords="333,85,375,118">
<area shape="rect" onclick="addBlack(document.f.4)" coords="288,85,330,118">
<area shape="rect" onclick="addRed(document.f.3)" coords="378,46,420,82">
<area shape="rect" onclick="addBlack(document.f.2)" coords="333,47,375,82">
<area shape="rect" onclick="addRed(document.f.1)" coords="288,47,330,82">
</map>
The html:
<form method="post" action="" name="f">
<table cellspacing="0" cellpadding="0" class="userprof" style="width: auto;">
<tbody><tr>
<td class="footer">
<img border="0" src="https:/domein/roulette_table-new.gif" usemap="#roulette_table.map" width="427" height="512">
</td>
<td valign="top" class="footer">
1: <input type="text" name="1" size="4" value="0" readonly="" style="padding: 0; margin-left: 7px;"><br>
4: <input type="text" name=4 size="4" value="0" readonly="" style="padding: 0; margin-left: 7px;"><br>
7: <input type="text" name="7" size="4" value="0" readonly="" style="padding: 0; margin-left: 7px;"><br>
10: <input type="text" name="10" size="4" value="0" readonly=""><br>
13: <input type="text" name="13" size="4" value="0" readonly=""><br>
16: <input type="text" name="16" size="4" value="0" readonly=""><br>
19: <input type="text" name="19" size="4" value="0" readonly=""><br>
22: <input type="text" name="22" size="4" value="0" readonly=""><br>
25: <input type="text" name="25" size="4" value="0" readonly=""><br>
28: <input type="text" name="28" size="4" value="0" readonly=""><br>
31: <input type="text" name="31" size="4" value="0" readonly=""><br>
34: <input type="text" name="34" size="4" value="0" readonly=""><br>
<br>
1<sup>st</sup>-12: <input type="text" name="row1" size="4" value="0" readonly="" style="padding: 0; margin-left: 2px;"><br>
1<sup>st</sup>-col: <input type="text" name="col1" size="4" value="0" readonly=""><br>
<br>
red: <input type="text" name="red" size="4" value="0" readonly="" style="padding: 0; margin-left: 11px;"><br>
black: <input type="text" name="black" size="4" value="0" readonly=""><br><br>
<input class="submit" type="submit" name="button" value="Turn the wheel">
</td>
<td valign="top" class="footer">
2: <input type="text" name="2" size="4" value="0" readonly="" style="padding: 0; margin-left: 7px;"><br>
5: <input type="text" name="5" size="4" value="0" readonly="" style="padding: 0; margin-left: 7px;"><br>
8: <input type="text" name="8" size="4" value="0" readonly="" style="padding: 0; margin-left: 7px;"><br>
11: <input type="text" name="11" size="4" value="0" readonly=""><br>
14: <input type="text" name="14" size="4" value="0" readonly=""><br>
17: <input type="text" name="17" size="4" value="0" readonly=""><br>
20: <input type="text" name="20" size="4" value="0" readonly=""><br>
23: <input type="text" name="23" size="4" value="0" readonly=""><br>
26: <input type="text" name="26" size="4" value="0" readonly=""><br>
29: <input type="text" name="29" size="4" value="0" readonly=""><br>
32: <input type="text" name="32" size="4" value="0" readonly=""><br>
35: <input type="text" name="35" size="4" value="0" readonly=""><br>
<br>
2<sup>nd</sup>-12: <input type="text" name="row2" size="4" value="0" readonly="" style="padding: 0; margin-left: 2px;"><br>
2<sup>nd</sup>-col: <input type="text" name="col2" size="4" value="0" readonly=""><br>
<br>
even: <input type="text" name="even" size="4" value="0" readonly=""><br>
odd: <input type="text" name="odd" size="4" value="0" readonly="" style="padding: 0; margin-left: 7px;"><br><br>
Chip size: <input type="text" name="chip" size="10" value="1">
</td>
<td valign="top" class="footer">
3: <input type="text" name="3" size="4" value="0" readonly="" style="padding: 0; margin-left: 7px;"><br>
6: <input type="text" name="6" size="4" value="0" readonly="" style="padding: 0; margin-left: 7px;"><br>
9: <input type="text" name="9" size="4" value="0" readonly="" style="padding: 0; margin-left: 7px;"><br>
12: <input type="text" name="12" size="4" value="0" readonly=""><br>
15: <input type="text" name="15" size="4" value="0" readonly=""><br>
18: <input type="text" name="18" size="4" value="0" readonly=""><br>
21: <input type="text" name="21" size="4" value="0" readonly=""><br>
24: <input type="text" name="24" size="4" value="0" readonly=""><br>
27: <input type="text" name="27" size="4" value="0" readonly=""><br>
30: <input type="text" name="30" size="4" value="0" readonly=""><br>
33: <input type="text" name="33" size="4" value="0" readonly=""><br>
36: <input type="text" name="36" size="4" value="0" readonly=""><br>
<br>
3<sup>td</sup>-12: <input type="text" name="row3" size="4" value="0" readonly="" style="padding: 0; margin-left: 2px;"><br>
3<sup>td</sup>-col: <input type="text" name="col3" size="4" value="0" readonly=""><br>
<br>
1-18: <input type="text" name="one" size="4" value="0" readonly="" style="padding: 0; margin-left: 7px;"><br>
19-36: <input type="text" name="nine" size="4" value="0" readonly=""><br><br>
<input class="submit" type="reset" value="Clear bets"><br>
</td>
</tr>
</tbody></table>
</form>
</div>
解决方案
根据上面关于使用dataset属性而不是数字名称/ID 的评论，我拼凑了一个演示，大致展示了如何使用这些data-name属性。由于指定的轮盘赌桌图像不存在，我不得不调整 css 和其他东西以查看移动鼠标时发生了什么，但项目的选择似乎工作正常。
// 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%;}<map name="roulette_table.map">
<area shape="circle" onclick="roll()" coords="102,103,102">
<area shape="circle" onclick="chip(100000)" coords="152,440,34" />
<area shape="circle" onclick="chip(10000)" coords="62,439,33" />
<area shape="circle" onclick="chip(1000)" coords="152,347,34" />
<area shape="circle" onclick="chip(100)" coords="59,347,33" />
<area shape="circle" onclick="chip(10)" coords="153,255,36" />
<area shape="circle" onclick="chip(1)" coords="62,254,34" />
<!-- simplify the HTML - use a simple parameter value to be retrieved using utility function "q()" -->
<area shape="rect" onclick="add('row3')" coords="253,332,285,470" />
<area shape="rect" onclick="add('row2')" coords="253,191,284,329" />
<area shape="rect" onclick="add('row1')" coords="253,49,284,189" />
<area shape="rect" onclick="add('col3')" coords="378,474,421,505" />
<area shape="rect" onclick="add('col2')" coords="333,475,375,505" />
<area shape="rect" onclick="add('col1')" coords="289,474,329,505" />
<area shape="rect" onclick="add('nine')" coords="212,403,249,471" />
<area shape="rect" onclick="add('one')" coords="213,47,249,119" />
<area shape="rect" onclick="add('odd')" coords="212,333,249,402" />
<area shape="rect" onclick="add('even')" coords="212,121,250,189" />
<area shape="rect" onclick="addBlack('black')" coords="212,261,250,330" />
<area shape="rect" onclick="addRed('red')" coords="212,191,249,258" />
<area shape="rect" onclick="addRed('36')" coords="378,439,420,471" />
<area shape="rect" onclick="addBlack('35')" coords="332,438,374,471" />
<area shape="rect" onclick="addRed('34')" coords="288,438,330,470" />
<area shape="rect" onclick="addBlack('33')" coords="378,404,420,437" />
<area shape="rect" onclick="addRed('32')" coords="331,403,374,436" />
<area shape="rect" onclick="addBlack('31')" coords="288,403,329,436" />
<area shape="rect" onclick="addRed('30')" coords="378,369,420,401" />
<area shape="rect" onclick="addBlack('29')" coords="333,368,375,400" />
<area shape="rect" onclick="addBlack('28')" coords="288,368,330,400" />
<area shape="rect" onclick="addRed('27')" coords="378,333,420,366" />
<area shape="rect" onclick="addBlack('26')" coords="332,333,375,365" />
<area shape="rect" onclick="addRed('25')" coords="288,332,330,366" />
<area shape="rect" onclick="addBlack('24')" coords="378,297,420,330" />
<area shape="rect" onclick="addRed('23')" coords="332,297,374,329" />
<area shape="rect" onclick="addBlack('22')" coords="288,297,330,329" />
<area shape="rect" onclick="addRed('21')" coords="378,263,420,296" />
<area shape="rect" onclick="addBlack('20')" coords="332,262,375,295" />
<area shape="rect" onclick="addRed('19')" coords="288,262,330,295" />
<area shape="rect" onclick="addRed('18')" coords="378,226,421,260" />
<area shape="rect" onclick="addBlack('17')" coords="332,227,375,261" />
<area shape="rect" onclick="addRed('16')" coords="288,227,329,260" />
<area shape="rect" onclick="addBlack('15')" coords="378,191,420,224" />
<area shape="rect" onclick="addRed('14')" coords="332,191,375,224" />
<area shape="rect" onclick="addBlack('13')" coords="288,191,329,224" />
<area shape="rect" onclick="addRed('12')" coords="378,155,420,189" />
<area shape="rect" onclick="addBlack('11')" coords="332,156,374,189" />
<area shape="rect" onclick="addBlack('10')" coords="288,156,329,189" />
<area shape="rect" onclick="addRed('9')" coords="378,121,420,153" />
<area shape="rect" onclick="addBlack('8')" coords="332,121,375,153" />
<area shape="rect" onclick="addRed('7')" coords="288,120,329,152" />
<area shape="rect" onclick="addBlack('6')" coords="378,85,420,118" />
<area shape="rect" onclick="addRed('5')" coords="333,85,375,118" />
<area shape="rect" onclick="addBlack('4')" coords="288,85,330,118" />
<area shape="rect" onclick="addRed('3')" coords="378,46,420,82" />
<area shape="rect" onclick="addBlack('2')" coords="333,47,375,82" />
<area shape="rect" onclick="addRed('1')" coords="288,47,330,82" />
</map>
<form method="post" name="f">
<table cellspacing="0" cellpadding="0" class="userprof" style="width: auto;">
<tbody>
<tr>
<td class="footer">
<span id='bet'></span>
<img border="0" src="https:/domein/roulette_table-new.gif" usemap="#roulette_table.map" width="427" height="512">
</td>
<td valign="top" class="footer">
<label>1: <input type='text' data-name='1' size='4' value='0' readonly='readonly' /></label>
<label>4: <input type='text' data-name='4' size='4' value='0' readonly='readonly' /></label>
<label>7: <input type='text' data-name='7' size='4' value='0' readonly='readonly' /></label>
<label>10: <input type='text' data-name='10' size='4' value='0' readonly='readonly' /></label>
<label>13: <input type='text' data-name='13' size='4' value='0' readonly='readonly' /></label>
<label>16: <input type='text' data-name='16' size='4' value='0' readonly='readonly' /></label>
<label>19: <input type='text' data-name='19' size='4' value='0' readonly='readonly' /></label>
<label>22: <input type='text' data-name='22' size='4' value='0' readonly='readonly' /></label>
<label>25: <input type='text' data-name='25' size='4' value='0' readonly='readonly' /></label>
<label>28: <input type='text' data-name='28' size='4' value='0' readonly='readonly' /></label>
<label>31: <input type='text' data-name='31' size='4' value='0' readonly='readonly' /></label>
<label>34: <input type='text' data-name='34' size='4' value='0' readonly='readonly' /></label>
<br />
<br />
<label>1<sup>st</sup>-12: <input type='text' name='row1' size='4' value='0' readonly='readonly' /></label>
<label>1<sup>st</sup>-col: <input type='text' name='col1' size='4' value='0' readonly='readonly' /></label>
<br />
<br />
<label>red: <input type='text' name='red' size='4' value='0' readonly='readonly' /></label>
<label>black: <input type='text' name='black' size='4' value='0' readonly='readonly' /></label>
<br />
<br />
<input class='submit' type='submit' name='button' value='Turn the wheel' />
</td>
<td valign='top' class='footer'>
<label>2: <input type='text' data-name='2' size='4' value='0' readonly='readonly' /></label>
<label>5: <input type='text' data-name='5' size='4' value='0' readonly='readonly' /></label>
<label>8: <input type='text' data-name='8' size='4' value='0' readonly='readonly' /></label>
<label>11: <input type='text' data-name='11' size='4' value='0' readonly='readonly' /></label>
<label>14: <input type='text' data-name='14' size='4' value='0' readonly='readonly' /></label>
<label>17: <input type='text' data-name='17' size='4' value='0' readonly='readonly' /></label>
<label>20: <input type='text' data-name='20' size='4' value='0' readonly='readonly' /></label>
<label>23: <input type='text' data-name='23' size='4' value='0' readonly='readonly' /></label>
<label>26: <input type='text' data-name='26' size='4' value='0' readonly='readonly' /></label>
<label>29: <input type='text' data-name='29' size='4' value='0' readonly='readonly' /></label>
<label>32: <input type='text' data-name='32' size='4' value='0' readonly='readonly' /></label>
<label>35: <input type='text' data-name='35' size='4' value='0' readonly='readonly' /></label>
<br />
<br />
<label>2<sup>nd</sup>-12: <input type='text' name='row2' size='4' value='0' readonly='readonly' /></label>
<label>2<sup>nd</sup>-col: <input type='text' name='col2' size='4' value='0' readonly='readonly' /></label>
<br />
<br />
<label>even: <input type='text' name='even' size='4' value='0' readonly='readonly' /></label>
<label>odd: <input type='text' name='odd' size='4' value='0' readonly='readonly' /></label>
<br />
<br />
<label>Chip size: <input type='text' name='chip' size='2' value='1' /></label>
</td>
<td valign='top' class='footer'>
<label>3: <input type='text' data-name='3' size='4' value='0' readonly='readonly' /></label>
<label>6: <input type='text' data-name='6' size='4' value='0' readonly='readonly' /></label>
<label>9: <input type='text' data-name='9' size='4' value='0' readonly='readonly' /></label>
<label>12: <input type='text' data-name='12' size='4' value='0' readonly='readonly' /></label>
<label>15: <input type='text' data-name='15' size='4' value='0' readonly='readonly' /></label>
<label>18: <input type='text' data-name='18' size='4' value='0' readonly='readonly' /></label>
<label>21: <input type='text' data-name='21' size='4' value='0' readonly='readonly' /></label>
<label>24: <input type='text' data-name='24' size='4' value='0' readonly='readonly' /></label>
<label>27: <input type='text' data-name='27' size='4' value='0' readonly='readonly' /></label>
<label>30: <input type='text' data-name='30' size='4' value='0' readonly='readonly' /></label>
<label>33: <input type='text' data-name='33' size='4' value='0' readonly='readonly' /></label>
<label>36: <input type='text' data-name='36' size='4' value='0' readonly='readonly' /></label>
<br />
<br />
<label>3<sup>rd</sup>-12: <input type='text' name='row3' size='4' value='0' readonly='readonly' /></label>
<label>3<sup>rd</sup>-col: <input type='text' name='col3' size='4' value='0' readonly='readonly' /></label>
<br />
<br />
<label>1-18: <input type='text' name='one' size='4' value='0' readonly='readonly' /></label>
<label>19-36: <input type='text' name='nine' size='4' value='0' readonly='readonly' /></label>
<br />
<br />
<input class='submit' type='reset' value='Clear bets' />
</td>
</tr>
</tbody>
</table>
</form>推荐阅读
- java - 使用 Criteria Query API 获取外键表的选定列
- mysql - 为什么在负载下使用 DESC 命令时 Mariadb 会卡在“打开表”？
- android - 带有本机反应的文本输入
- python - 如何在 pytorch 中为 Conv2d 实现棋盘步幅？
- flutter - 如何知道用户何时删除 VerificationCodeInput Flutter 中的输入
- angular - 如何使用 AngularFirestore 查询单个文档？
- java - 如何制定总价
- android - .xml 文件中的这个元素是什么？
- vuejs2 - Vuetify + prerender-spa-plugin
- azure - Azure Docker Web 应用程序。停靠站点
因为它超出了交换使用限制