如何通過JS按下按鈕時顯示相同的文本？

我不確定我是否以正確的方式提出問題，所以請儘量忍受。我的意思是，如果有人點擊一個「1」按鈕，我希望它在顯示區域顯示「1」。我正在嘗試構建一個簡單的計算器，僅用於我自己的練習。對不起，如果這是一個壞問題，我會刪除它，如果它被回答，我只是無法在Google或任何其他地方找到答案。如何通過JS按下按鈕時顯示相同的文本？

因此，這裏是我的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(){ 

}

來源

2017-05-29 user147219

下面是我對你的回答。

第一個答案是將數據屬性放在按鈕中。秒的答案是讓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)

來源

2017-05-29 01:25:42

我對這些事情瞭解不多，但也許是這樣？

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>

來源

2017-05-29 01:45:37

如何通過JS按下按鈕時顯示相同的文本？

回答

相關問題