html/javascript 中的简单计算器

Question

我正在尝试用 html 和 JavaScript 制作一个计算器。单击按钮后，我试图将数字插入到我的 div 中。当我这样做时，默认的“0”消失了，它根本不插入任何东西。

    function copy(event) {
        var newValue = event.target.value;
        document.querySelector("#display").innerHTML = newValue;
    }

    var textfield = document.querySelector("#btn_7");
    textfield.addEventListener("click", copy);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="frame">
  <div id="display">0</div>
  <button id="btn_7">7</button>
  <button id="btn_8">8</button>
  <button id="btn_9">9</button>
  <button id="btn_div">/</button>
  <button id="btn_4">4</button>
  <button id="btn_5">5</button>
  <button id="btn_6">6</button>
  <button id="btn_prod">*</button>
  <button id="btn_1">1</button>
  <button id="btn_2">2</button>
  <button id="btn_3">3</button>
  <button id="btn_min">-</button>
  <button id="btn_clear">C</button>
  <button id="btn_0">0</button>
  <button id="btn_eq">=</button>
  <button id="btn_plus">+</button>
</div>

如果我向 newValue 变量添加一个字符串，它会显示在我的 div 中。所以这意味着当我按下按钮时它不会给 div 任何东西。有没有办法解决这个问题？

关于var textfield = document.querySelector("#btn_7");

现在我必须为每个按钮都做这个，那会占用很多行有没有更好的方法？

Answer 1

按钮没有默认属性value，所以在这种情况下使用属性textContent。

我建议您使用隐藏输入来存储值，或者您也可以使用data-attributes。

现在我必须为每个按钮都做这个，这需要很多行有没有更好的方法？

您可以使用函数document.querySelectorAll(selector) 并循环它来绑定特定事件。

function copy(event) {
  var newValue = event.target.textContent;
  document.querySelector("#display").innerHTML = newValue;
}

Array.prototype.forEach.call(document.querySelectorAll('button'), function(b) {
  b.addEventListener("click", copy);
});

<div id="frame">
  <div id="display">0</div>
  <button id="btn_7">7</button>
  <button id="btn_8">8</button>
  <button id="btn_9">9</button>
  <button id="btn_div">/</button>
  <button id="btn_4">4</button>
  <button id="btn_5">5</button>
  <button id="btn_6">6</button>
  <button id="btn_prod">*</button>
  <button id="btn_1">1</button>
  <button id="btn_2">2</button>
  <button id="btn_3">3</button>
  <button id="btn_min">-</button>
  <button id="btn_clear">C</button>
  <button id="btn_0">0</button>
  <button id="btn_eq">=</button>
  <button id="btn_plus">+</button>
</div>

Answer 2

这样试试

$(function(){
	
	$('button[id^="btn_"]').click(function(){
		var display;
		if($('.tmp').length > 0){
			display = $('.tmp').text();
		}else{
			$( "<p class='tmp' style='display:none;'></p>" ).appendTo( "#frame" );
			display = '';
		}
		switch($(this).text()){
			case 'C' :
				display = '0';
			break;
			case '=' :
				display = eval(display);
			break;
			default :
				display = display.concat($(this).text());
		}
		$('#display').text(display);
		$('.tmp').text((display != '0') ? display : '');
	});
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="frame">
	<div id="display">0</div>
	<button id="btn_7">7</button>
	<button id="btn_8">8</button>
	<button id="btn_9">9</button>
	<button id="btn_div">/</button><br/>
	<button id="btn_4">4</button>
	<button id="btn_5">5</button>
	<button id="btn_6">6</button>
	<button id="btn_prod">*</button><br/>
	<button id="btn_1">1</button>
	<button id="btn_2">2</button>
	<button id="btn_3">3</button>
	<button id="btn_min">-</button><br/>
	<button id="btn_clear">C</button>
	<button id="btn_0">0</button>
	<button id="btn_eq">=</button>
	<button id="btn_plus">+</button>
</div>

Answer 3

这里是选择值和替换显示div的html。你需要做一些额外的事情来实现你想要的输出。

var display = $('#display');
$('.btn').click(function(e) {
  var btn = e.target;
  display.html(btn.id);
});

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<div id="frame">
<div id="display">0</div>
<button class="btn" id="btn_7">7</button>
<button class="btn"  id="btn_8">8</button>
<button class="btn"  id="btn_9">9</button>
<button class="btn"  id="btn_div">/</button>
<button class="btn"  id="btn_4">4</button>
<button class="btn"  id="btn_5">5</button>
<button class="btn"  id="btn_6">6</button>
<button class="btn"  id="btn_prod">*</button>
<button class="btn"  id="btn_1">1</button>
<button class="btn"  id="btn_2">2</button>
<button class="btn"  id="btn_3">3</button>
<button class="btn"  id="btn_min">-</button>
<button class="btn"  id="btn_clear">C</button>
<button class="btn"  id="btn_0">0</button>
<button class="btn"  id="btn_eq">=</button>
<button class="btn"  id="btn_plus">+</button>
</div>