javascript - 如何循环遍历标签元素并通过 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”
• 当您单击计算器的相应键时(例如单击键 "8"),仅获取您单击的那个键的内容
• 当您获得所单击的键的内容时，将其添加到 变量 key=""(例如 key+="8")
• 在名为“display”的范围内显示结果，即黑色 计算器的屏幕。 (在黑屏上显示 数量:“8”)

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

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

Answer 1

将事件移至 JS 中，然后为单击的元素运行 calc 函数:

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>