8
Tôi đang tạo một máy tính jquery, bằng cách nhấp vào các nút đại diện cho các số và toán tử trên máy tính, innerHTML của màn hình sẽ thay đổi để phản ánh các nút được nhấp.Tạo một máy tính JQuery, thay đổi innerHTML nhưng không có gì đang xảy ra
Dưới đây là mã của tôi:
<!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>
và đây là jsfiddle của nó: http://jsfiddle.net/ynf2qvqw/
Tại sao innerHTML của lớp hiển thị không thay đổi?
FYI, các phần tử nút của bạn không chứa HTML, vì vậy bạn không nên sử dụng 'innerHTML'. Chúng chỉ có văn bản, vì vậy sẽ an toàn hơn khi sử dụng nội dung văn bản, có thể thông qua '$ (event.target) .text()'. –
thử http://codepen.io/mariusbalaj/pen/bGqhI – Hiero