单击按钮时输入框的变化值
[英]Cant change value of input box when I click a button
问题描述
Hey guys I'm trying to make a simple JavaScript calculator.Right now I'm just trying to change the input box to display the button I clicked, but I'm having trouble figuring out why its not working. 
大家好，我正在尝试制作一个简单的JavaScript计算器。现在，我只是想更改输入框以显示单击的按钮，但是我很难弄清为什么它不起作用。 here's my code. 这是我的代码。
var display = document.getElementById('display'); function toScreen(x) { display =''; display.textContent = x; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>calculator</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Javascript Calculator</h1> <div id="calculator"> <form> <input type="text" id="display" disabled> <br> <input type="button" value="C" id="keys" onclick="toScreen('c')"> <input type="button" value="CE" id="keys" onclick="clearEntry('c')"> <input type="button" value="x^2" id="keys" onclick="powerOf('c')"> <input type="button" value="+" id="keys" onclick="toScreen('+')"> <br> <input type="button" value="9" id="keys" onclick='toScreen("9")'> <input type="button" value="8" id="keys" onclick="toScreen('8')"> <input type="button" value="7" id="keys" onclick="toScreen('7')"> <input type="button" value="-" id="keys" onclick="toScreen('-')"> <br> <input type="button" value="6" id="keys" onclick="toScreen('6')"> <input type="button" value="5" id="keys" onclick="toScreen('5')"> <input type="button" value="4" id="keys" onclick="toScreen('4')"> <input type="button" value="x" id="keys" onclick="toScreen('x')"> <br> <input type="button" value="3" id="keys" onclick="toScreen('3')"> <input type="button" value="2" id="keys" onclick="toScreen('2')"> <input type="button" value="1" id="keys" onclick="toScreen('1')"> <input type="button" value="/" id="keys" onclick="toScreen('/')"> <br> <input type="button" value="0" id="keys" onclick="toScreen('0')"> <input type="button" value="." id="keys" onclick="toScreen('.')"> <input type="button" value="=" id="equal" onclick="equal()"> </form> <h3>Javascript Calculator</h3> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
3 个解决方案
解决方案1
1 2018-07-07 01:30:34
I have attached the working code here. 我在这里附上了工作代码。 If you wish to just replace the text in input remove + from the function. 如果您只想替换输入中的文本，请从函数中删除+ 。
var display = document.getElementById('display'); function toScreen(x) { display.value += x; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>calculator</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Javascript Calculator</h1> <div id="calculator"> <form> <input type="text" id="display" disabled> <br> <input type="button" value="C" id="keys" onclick="toScreen('c')"> <input type="button" value="CE" id="keys" onclick="clearEntry('c')"> <input type="button" value="x^2" id="keys" onclick="powerOf('c')"> <input type="button" value="+" id="keys" onclick="toScreen('+')"> <br> <input type="button" value="9" id="keys" onclick='toScreen("9")'> <input type="button" value="8" id="keys" onclick="toScreen('8')"> <input type="button" value="7" id="keys" onclick="toScreen('7')"> <input type="button" value="-" id="keys" onclick="toScreen('-')"> <br> <input type="button" value="6" id="keys" onclick="toScreen('6')"> <input type="button" value="5" id="keys" onclick="toScreen('5')"> <input type="button" value="4" id="keys" onclick="toScreen('4')"> <input type="button" value="x" id="keys" onclick="toScreen('x')"> <br> <input type="button" value="3" id="keys" onclick="toScreen('3')"> <input type="button" value="2" id="keys" onclick="toScreen('2')"> <input type="button" value="1" id="keys" onclick="toScreen('1')"> <input type="button" value="/" id="keys" onclick="toScreen('/')"> <br> <input type="button" value="0" id="keys" onclick="toScreen('0')"> <input type="button" value="." id="keys" onclick="toScreen('.')"> <input type="button" value="=" id="equal" onclick="equal()"> </form> <h3>Javascript Calculator</h3> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
解决方案2
0 2018-07-07 01:41:53
approch 1: function toScreen(x) { 方法1：函数toScreen（x）{
document.getElementById("display").value= x;
}
approach 2: if you want to keep display outiside of the method then you have to keep whole code below( ie before body end tag). 方法2：如果要保持该方法的外部显示，则必须将整个代码保留在下面（即，在body end标签之前）。 As per you current code you are trying access the element before dom is getting loaded var display = document.getElementById("display"); 按照您当前的代码，您正在尝试在加载dom之前访问元素var display = document.getElementById（“ display”）;
code : 代码：
var display = document.getElementById("display");
function toScreen(x) {
display.value =x;
}
</script>
</body>
解决方案3
0 2018-07-07 02:41:49
Lets see the problem with the code 让我们看看代码的问题
In following statement you are assigning the text object by finding element and it is fine. 在下面的语句中，您通过查找元素来分配文本对象，这很好。
var display = document.getElementById('display');
In following statement you are overriding text object with empty string, means there is not textbox object in display variable and here is the problem. 在下面的语句中，您要使用空字符串覆盖文本对象，这意味着显示变量中没有文本框对象，这就是问题所在。
display ='';
What you need to do to clear text box content is 您需要清除文本框内容的方法是
display.value='';
The textContent property sets or returns the text content of the specified node and not to play with text box value. textContent属性设置或返回指定节点的文本内容，而不与文本框值一起播放。 You need to use value property instead. 您需要改用value属性。
so final code must be like below 所以最终代码必须如下所示
var display = document.getElementById('display');
function toScreen(x) {
display.value ='';//Even this is not required because already over writing text in following statement
display.value = x;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.