Question

我正在尝试使用Javascript / HTML / CSS制作一个计算器，目前正处于尝试按下按钮（使用Bootstraps的按钮类）显示在显示屏上的阶段。

HTML的一部分：

<div class="row">
     <button class="keys" id="7">7</button>
     <button class="keys" id="8">8</button>
     <button class="keys" id="9">9</button>
     <button class="keys" id="/"><img src="images/division.png" height="50em" width="50em"></button>
     <button class="keys" id="reset">C</button>
</div>

在js文件中：

function calculate(evt){
   var keyValue = evt.target.id  // recording the key value into variable

   tempDisplay += keyValue;
   document.getElementById("display").innerHTML = tempDisplay;
}

前3行（7,8＆amp; 9）很好，getElementById可以抓取id并在“display”部分显示它们。

然而，我无法使用图像显示其ID，即显示屏上的“/”。

如果我输入了某种文本，例如：

<button class="keys" id="/">text<img src="images/division.png"></button>

然后“/”可以正常显示。

感谢任何帮助

Answer 1

evt.target将是点击的元素。

 <button class="keys" id="/"><img src="images/division.png" height="50em" width="50em"></button>

在这种情况下，该元素将是<img>。

如果要获取包含它的按钮的ID，则需要检查其父级。

对此的一般解决方案是递归检查tagName的{{1}}，直到找到按钮或父母用完为止。

Answer 2

function calculate(evt){


    e = evt.target || evt.srcElement;    
    var keyValue;  // recording the key value into variable   
    if (e.nodeName === 'BUTTON') {
        keyValue=e.id;
    }   
    if (e.nodeName === 'IMG') {
       keyValue=e.parentNode.id;
    }
    tempDisplay += keyValue;
    document.getElementById("display").innerHTML = tempDisplay;
}

无法使用getElementById

2 个答案: