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

我不确定我是否以正确的方式问问题，所以请尝试忍受我。我的意思是，如果有人单击一个说" 1"的按钮，我希望它在显示区域显示" 1"。我只是为了自己的练习来构建一个简单的计算器。抱歉，如果这是一个不好的问题，我将在答案后将其删除，我只是在Google上找到答案或其他任何内容。

所以这是我的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(){
}

这是我的答案。

第一个答案是将数据属性放在您的按钮中。秒答案是将您的按钮的内在文章获取到您的按钮。

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)

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

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

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

相关内容

最新更新

热门标签：