Question

我试图用html和JavaScript制作一个计算器。点击按钮后，我试图将数字插入我的div。当我这样做时，默认的＆＃39; 0＆＃39;消失，它根本不插入任何东西。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

现在我必须为每个按钮制作这个，那会占用很多行是否有更好的方法呢？

Answer 1

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

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

现在我必须为每个按钮制作这个并且需要很多行才有更好的方法吗？

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

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

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。你需要做一些额外的事情来实现你想要的输出。

＆＃13;

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

＆＃13;

<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>

＆＃13;

简单的计算器html / javascript

3 个答案: