javascript - 无法使用 getElementById 检索/显示按钮 ID

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 和 9)很好，getElementById 可以抓取 id 并将它们显示在“显示”部分。

但是我无法让图像所在的行显示其 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 parentNode的直到你找到一个按钮或用完 parent 。