为什么这个按钮不会改变文本框？答案

【问题标题】：Why won't this button alter the text box?为什么这个按钮不会改变文本框？
【发布时间】：2014-01-05 20:10:39
【问题描述】：

我编写了一个计算器，当您单击按钮插入文本时，它不会在框中插入文本。请帮我找到问题。代码如下：

<html>
<head>
<style type=text/css>
#calculator{
    margin-top:10%;
    margin-left:37%;
    background:cyan;
    color:black;
    height:350px;
    width:350;
    padding:50px;
    text-align:center;
    border:5px dashed blue;
}
#calculator b{
    color:black;
}

</style>
<script type="text/javascript" language="javascript">
var num1 = getElementById("number1");
var num2 = getElementById("number2").value;;
var op = getElementById("operation").value;;
var ans = getElementById("answer").value;
function type1(){
    if(num1 != ""){
        num1 = "1";
    }
}
</script>
</head>
<body>
<div id=calculator>
<center>
<table>
<tr><td><input type="text" value=""  placeholder="Number 1"  id="number1"   readonly="readonly" maxlength="1" tabindex="1"/></td></tr><tr><td>
<input type="text" value=""  placeholder="Operation" id="operation" maxlength="1" readonly="readonly" tabindex="2"/></td></tr><tr><td>
<input type="text" value=""  placeholder="Number 2"  id="number2"   maxlength="1" readonly="readonly" tabindex="3"/><b>=</b></td></tr><tr><td>
<input type="text" value=""  placeholder="Answer"    id="answer"    tabindex="4"   readonly="readonly"/></td></tr>
<table>
<tr><td><input type="button" value="1" onClick="type1()"</td><td><input type="button" value="2" onClick="type2()"</td><td><input type="button" value="3" onClick="type3()"</td></tr>
<tr><td><input type="button" value="4" onClick="type4()"</td><td><input type="button" value="5" onClick="type5()"</td><td><input type="button" value="6" onClick="type6()"</td></tr>
<tr><td><input type="button" value="7" onClick="type7()"</td><td><input type="button" value="8" onClick="type8()"</td><td><input type="button" value="9" onClick="type9()"</td></tr>
<tr><td><input type="button" value="- " onClick="type-()"></td><td><input type="button" value="0" onClick="type0()"></td><td><input type="button" value="+" onClick="type+()"></td></tr>
<tr><td><input type="button" value="X" onClick="typeX()"></td><td><input type="button" value="=" onClick="type=()"></td><td><input type="button" value="/ " onClick="type/()"></td></tr>
</table>
<p><b>NOTE:</b>This widget does not support negative numbers.</p>
</center>
</div>
</body>
</html>

它在行动： http://test342.coffeecup.com/LearningJavascript.html 感谢您的帮助！

【问题讨论】：

请在浏览器中打开开发者控制台。在那里你可以看到很多可以轻松纠正的错误。例如：document.getElementById 不只是getElementById，或者：type2 没有定义...

标签： javascript html calculator

【解决方案1】：

1将var num1 = getElementById("number1");替换为var num1 = getElementById("number1").value;

对于其他按钮，没有为它们定义任何功能。

2 将getElementById 替换为document.getElementById（只需添加此内容，Bigood 已先获得。）

【讨论】：

【解决方案2】：

首先，getElementById() 是document 对象的一个方法。

请改用document.getElementById() (see reference)。

其次，您不应该为每个按钮声明一个函数：您宁愿为每种类型的交互使用一个函数，如 number 和 operation。 p>

然后，在您的onclick 属性中，使用正确的函数调用，并在操作完成时更改焦点输入。

第三，分号不要用两次，这样不安全:)

【讨论】：