如何循环遍历标签元素并通过 OnClick 函数在显示器上获取相应的内容？

Question

var key="";

//get key values
var x = document.getElementById("calculator");
var y = x.getElementsByTagName("span");

function calc()
{
    for(var i = 0; i <= y.length; i++)
    {
        key+=y[i].innerHTML;
        document.getElementById("display").innerHTML=key;

    }
};

我正在尝试：

遍历我代码中所有 span 标签的内容（包含计算器的键值）使用"document.getElementsByTagName"
当您点击计算器的相应键时（ex.click "8"),只获取你点击的那个键的内容
当您获得您正在单击的那个键的内容时，将其添加到变量 key=""（例如 key+="8"）
在名为 "display" 的范围内显示结果，即黑色计算器的屏幕。（在黑屏上显示数字：“8”）

这个程序基本上应该只是获取您在计算器上单击的键的内容并将其显示在屏幕上。

我现在的 code 只是循环遍历 span 标签，获取它们的内容但是它失败了，因为它会同时打印计算器显示中的所有 span 内容，无论你用哪个键点击。有办法解决吗？我知道还有其他选项，如事件监听器或为每个键设置一个函数，但我想知道这段代码是否有一些逻辑并且可以完成以执行任务。

Answer 1

将您的事件移动到 JS 中，然后运行被点击元素的计算函数：

var key = "";
var x = document.getElementById("calculator");
var y = x.getElementsByTagName("span");
var display = document.getElementById("display");
for (var i = 0; i < y.length; i++) {
    addEvent(y[i], "click", calc);
}

function calc() {
    key += this.innerHTML;
    display.innerHTML = key;
}

function addEvent(elt, type, callback) {
    if (window.addEventListener) {
        elt.addEventListener(type, callback, false);
    } else if (window.attachEvent) {
        elt.attachEvent("on" + type, callback);
    }
}

#calculator {
    width:200px;
    height:380px;
}
div span {
    width:50px;
    height:50px;
    outline: 1px solid black;
    float:left;
    line-height:50px;
    background-color:#f6f6f6;
    font-family:"Neue Helvetica", sans-serif;
    font-size:15px;
    text-align: center;
}
#display {
    width:200px;
    height:80px;
    text-align:right;
    line-height:100px;
    font-size:25px;
    overflow:hidden;
    color:white;
    background-color:black;
}
#zero {
    width:100px;
}

<div id="calculator"> <span id="display">0</span>
 <span>AC</span>
 <span>+/-</span>
 <span>%</span>
 <span>÷</span>
 <span>7</span>
 <span>8</span>
 <span>9</span>
 <span>x</span>
 <span>4</span>
 <span>5</span>
 <span>6</span>
 <span>-</span>
 <span>1</span>
 <span>2</span>
 <span>3</span>
 <span>+</span>
 <span id="zero">0</span>
 <span>.</span>
 <span>=</span>

</div>

Answer 2

这是一个替代解决方案。

方法略有不同。结果相同。

var getKeyValue = [];
var totalKey = "";
var keys = document.getElementById("calculator").getElementsByTagName("span");

function calc(i) {
  totalKey += keys[i].innerHTML;
  document.getElementById("display").innerHTML = totalKey;
}

function getKeyValueFunction(i) {
  return function() {
    keys[i].addEventListener('click', function() {
      calc(i);
    }, false);
  };
}

function initiateGetKeyValues() {
  for (var i = 0; i < keys.length; i++) {
    getKeyValue[i] = getKeyValueFunction(i);
    getKeyValue[i]();
  }
}

window.onload = initiateGetKeyValues();

#calculator {
  width: 200px;
  height: 380px;
}
div span {
  width: 50px;
  height: 50px;
  outline: 1px solid black;
  float: left;
  line-height: 50px;
  background-color: #f6f6f6;
  font-family: "Neue Helvetica", sans-serif;
  font-size: 15px;
  text-align: center;
}
#display {
  width: 200px;
  height: 80px;
  text-align: right;
  line-height: 100px;
  font-size: 25px;
  overflow: hidden;
  color: white;
  background-color: black;
}
#zero {
  width: 100px;
}

<div id="calculator">
  <span id="display">0</span>
  <span>AC</span>
  <span>+/-</span>
  <span>%</span>
  <span>÷</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>x</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>-</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>+</span>
  <span id="zero">0</span>
  <span>.</span>
  <span>=</span>
</div>

如何循环遍历标签元素并通过 OnClick 函数在显示器上获取相应的内容？

How to loop through tag element and getting a respective content on a display by OnClick function?

html

javascript

for-loop

calculator