Question

伙计们，我正在尝试制作一个简单的JavaScript计算器。现在，我只是试图更改输入框以显示我单击的按钮，但是我很难弄清为什么它不起作用。这是我的代码。

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>

Answer 1

我在这里附上了工作代码。如果您只想替换输入中的文本，请从函数中删除+。

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>

Answer 2

方法1：函数toScreen（x）{

        document.getElementById("display").value= x;
}

方法2：如果要保持该方法的外部显示，则必须将整个代码保持在下面（即，在body end标签之前）。根据您当前的代码，您正在尝试在加载dom之前访问元素 var display = document.getElementById（“ display”）;

代码：

    var display = document.getElementById("display");

    function toScreen(x) {
        display.value =x;

    }
    </script>
</body>

Answer 3

让我们看看代码的问题

在下面的语句中，您通过查找元素来分配文本对象，这很好。

var display = document.getElementById('display');

在下面的语句中，您要使用空字符串覆盖文本对象，这意味着显示变量中没有文本框对象，这就是问题所在。

display ='';

清除文本框内容所需要做的是

display.value='';

textContent属性设置或返回指定节点的文本内容，并且不与文本框值一起播放。您需要改用value属性。

因此最终代码必须类似于以下内容

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;

    }

单击按钮时输入框的变化值

3 个答案: