javascript - 在 javascript 中访问 HTML 表单值

Question

这是我想要实现的目标，但由于某种原因，它不起作用:

Javascript:

<script type="text/javascript">         
  function  calculate() {             
     var n1 = getElementById("1").value
     var n2 = getElementById("2").value
     var answer = n1+n2
     alert(answer)
  }
</script>

HTML:

<form id="form">
<input id="1" type="text" />
<input id="2" type="text" />
<input type="button onClick="calculate()" value="Go" />
</form>

我不确定哪里出错了，有人可以帮忙吗？

Answer 1

您不应该以数字开头 ID - 在 HTML4 和 CSS 中它是 isn't allowed , 在 HTML5 中是允许的，但这样做不是好的做法。

此外，在此上下文中它在 HTML5 中是非法的 - 作为以数字 requires at least one letter afterwards 开头的 ID .

所以，首先用字母/单词替换编号的 ID。

---

除此之外，您还需要修复以下语法错误:

替换getElementById("id").value与 document.getElementById("id").value;

并替换<input type="button onClick="calculate()" value="Go" />

与 <input type="button" onClick="calculate()" value="Go" /> (注意 " 缺少一个结束符 "button")。

这是一个工作 jsFiddle .

---

这是 jsFiddle 中使用的代码:

Javascript:

function  calculate() {
   var n1 = document.getElementById("aItem").value;
   var n2 = document.getElementById("bItem").value;
   var answer = n1+n2;
   alert(answer);
}

HTML:

<form id="form">
   <input id="aItem" type="text" />
   <input id="bItem" type="text" />
   <input type="button" onClick="calculate()" value="Go"/>
</form>