Question

我不确定我是否以正确的方式提出问题，所以请尽量忍受我。我的意思是，如果有人点击了说＆＃34; 1＆＃34;的按钮，我希望它显示＆＃34; 1＆＃34;在显示区域。我试图建立一个简单的计算器，只是为了我自己的实践。对不起，如果这是一个糟糕的问题，我会在收到答案后将其删除，如果是，我就无法在谷歌或其他任何地方找到答案。

所以这是我的HTML和JS代码到目前为止：

HTML：

<body>
    <div id="calcBod">
        <div id="display"><p id="displayTxt"></p></div>
        <div id="numBtns">
            <div id="buttonsRow1">
                <button id="Btn1">1</button>
                <button id="Btn2">2</button>
                <button id="Btn3">3</button>
                <button id="plusBtn">+</button>
            </div>
            <div id="buttonsRow2">
                <button id="Btn4">4</button>
                <button id="Btn5">5</button>
                <button id="Btn6">6</button>
                <button id="minBtn">-</button>
            </div>
            <div id="buttonsRow3">
                <button id="Btn7">7</button>
                <button id="Btn8">8</button>
                <button id="Btn9">9</button>
                <button id="multBtn">x</button>
            </div>
            <div id="buttonsRow4">
                <button id="decBtn">.</button>
                <button id="Btn0">0</button>
                <button id="eqlBtn">=</button>
                <button id="divBtn">÷</button>
            </div>
            <div id="clrDel">
                <button id="delBtn">Delete</button>
                <button id="clrBtn">Clear</button>
            </div>
        </div>
    </div>
</body>

JS：

var btn1=document.getElementById("Btn1");
var btn2=document.getElementById("Btn2");
var btn3=document.getElementById("Btn3");
var btn4=document.getElementById("Btn4");
var btn5=document.getElementById("Btn5");
var btn6=document.getElementById("Btn6");
var btn7=document.getElementById("Btn7");
var btn8=document.getElementById("Btn8");
var btn9=document.getElementById("Btn9");
var btn0=document.getElementById("Btn0");
var decBtn=document.getElementById("decBtn");
var eqlBtn=document.getElementById("eqlBtn");
var plusBtn=document.getElementById("plusBtn");
var minBtn=document.getElementById("minBtn");
var multBtn=document.getElementById("multBtn");
var divBtn=document.getElementById("divBtn");
var delBtn=document.getElementById("delBtn");
var clrBtn=document.getElementById("clrBtn");

function displayText(){

}

Answer 1

这是我给你的答案。

第一个答案是将data-attribute放在按钮中。秒的答案是将innerText放到按钮上。

function clickThis(event) {
  var target = event.target;
  console.log(target.getAttribute("data-value"));
  console.log(target.innerText);
  console.log("TEST");
}

document.getElementById("numBtns").addEventListener("click", clickThis)

Answer 2

我对这些事情不太了解，但也许是这样的？

＆＃13;

function Calculator(id) {
  var xContainer = document.getElementById(id);
  var xDisplay = document.createElement('div');

  var elements = [
    '1', '2', '3', '+',
    '4', '5', '6', '-',
    '7', '8', '9', '*',
    '.', '0', '=', '/',
    'del', 'clear',
  ];

  var click = function(event) {
    event.preventDefault();
    var value = this.innerText;

    if (value == '=') {
      xDisplay.innerText = eval(xDisplay.innerText); // jshint ignore:line
    } else if (value == 'del') {
      xDisplay.innerText = xDisplay.innerText.slice(0, -1);
    } else if (value == 'clear') {
      xDisplay.innerText = '';
    } else {
      xDisplay.innerText += value;
    }
  };

  xContainer.appendChild(xDisplay);

  var xRow;
  elements.forEach(function(element, index) {
    if (index % 4 === 0) {
      xRow = document.createElement('div');
      xContainer.appendChild(xRow);
    }
    var xElement = document.createElement('button');
    xElement.innerText = element;
    xRow.appendChild(xElement);
    xElement.addEventListener('click', click);
  });
}

var calc = new Calculator('calculator');

＆＃13;

<div id="calculator"></div>

＆＃13;

如何通过JS按下按钮时显示相同的文本？

2 个答案: