2017-05-29 17 views
0

私は正しい方法で質問をしているのかどうかはわかりませんが、正確には私を負担してください。私が意味することは、誰かが「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(){ 

} 

答えて

0

ここにあなたのための私の答えです。

最初の答えは、ボタンにデータ属性を入れることです。 秒の答えは、あなたのボタンに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) 
0

私はこれらのことについてよく分かりませんが、これは多分?

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>