时间戳

首页 > 解决方案 > 单击按钮时无法更改输入框的值

javascript - 单击按钮时无法更改输入框的值

问题描述

嘿伙计们，我正在尝试制作一个简单的 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>

标签： javascripthtml

解决方案

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

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>

推荐阅读