制作一个 JQuery 计算器，更改 innerHTML 但没有任何反应
Posted
技术标签:
【中文标题】制作一个 JQuery 计算器，更改 innerHTML 但没有任何反应【英文标题】：Making a JQuery calculator, changing innerHTML but nothing is happening 【发布时间】：2015-09-24 03:28:15 【问题描述】：我正在制作一个 jquery 计算器，通过单击代表计算器上的数字和运算符的按钮，显示的 innerhtml 将更改以反映单击的按钮。
下面是我的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<title> JQuery Calculator </title>
</head>
<body>
<style>
section
padding: 2em;
.display
height: 5em;
color: #333;
</style>
<section id="calculator">
<div class="display">
</div>
<div id="numbersContainer">
<table id="numbers">
<tr>
<td>
<button class="number" id="one">1</button>
</td>
<td>
<button class="number" id="two">2</button>
</td>
<td>
<button class="number" id="three">3</button>
</td>
</tr>
<tr>
<td>
<button class="number" id="four">4</button>
</td>
<td>
<button class="number" id="five">5</button>
</td>
<td>
<button class="number" id="six">6</button>
</td>
</tr>
<tr>
<td>
<button class="number" id="seven">7</button>
</td>
<td>
<button class="number" id="eight">8</button>
</td>
<td>
<button class="number" id="nine">9</button>
</td>
</tr>
<tr>
<td>
<button class="number" id="zero">0</button>
</td>
</tr>
</table>
<table id="operators">
<tr>
<td>
<button class="operator" id="plus">+</button>
</td>
<td>
<button class="operator" id="minus">-</button>
</td>
</tr>
<tr>
<td>
<button class="operator" id="divide">/</button>
</td>
<td>
<button class="operator" id="times">x</button>
</td>
</tr>
</table>
</div>
</section>
<script>
var storedCalculation;
$('.number, .operator').click( function()
var numberOrOperator = event.target.innerHTML;
storedCalculation+=numberOrOperator;
);
var calcScreen = $('.display').innerHTML;
calcScreen = storedCalculation;
</script>
</body>
</html>
这是它的jsfiddle： http://jsfiddle.net/ynf2qvqw/
为什么显示类的innerHTML没有变化？
【问题讨论】：
仅供参考，您的按钮元素不包含 HTML，因此您不应使用innerHTML。他们只有文本，所以使用文本内容会更安全，可能是通过$(event.target).text()。
试试codepen.io/mariusbalaj/pen/bGqhI
【参考方案1】：
http://jsfiddle.net/blaird/ynf2qvqw/2/
var storedCalculation = '';
$('.number, .operator').click(function ()
var numberOrOperator = $(this).html();
storedCalculation += numberOrOperator;
$('.display').html(storedCalculation);
);
您错误地使用了 innerHTML，并且您试图在 click 函数之外设置您的值。
【讨论】：
【参考方案2】：jQuery 对象没有像原生 javascript HTMLElements 那样的 innerHTML 属性。为了修改 jQuery 对象的内部 HTML，您必须使用 html() 方法，如下所示：
$('.display').html(storedCalculation);
更多信息请参见http://api.jquery.com/html/。
【讨论】：
【参考方案3】：innerHTML 不是 jQuery 的属性。您可以通过从选择器中获取 DOMElement 来设置 innerHTML：
$('.display').get(0).innerHTML = storedCalculation;
或者你可以使用 jQuery .html() 方法：
$('.display').html(storedCalculation)
【讨论】：
$('.display').get(0) 比 $('.display')[0] 更正式。【参考方案4】：
首先，您需要将 storedCalculation 变量设置为初始值，以使其在一般情况下更好地工作，否则初始值将“未定义”。
var storedCalculation = "";
下一位保持不变：
$('.number, .operator').click( function()
var numberOrOperator = event.target.innerHTML;
storedCalculation+=numberOrOperator;
在这里，您使用 jQuery html() 方法。参数是您要设置的值，在您的情况下为 storedCalculation。
var calcScreen = $('#display1').html(storedCalculation);
);
希望我能帮上忙！
【讨论】：
以上是关于制作一个 JQuery 计算器，更改 innerHTML 但没有任何反应的主要内容，如果未能解决你的问题，请参考以下文章