如何通过没有 id、class 或 jQuery 的 tagName 获取按钮？

Question

我想使用 tagName 获取不带 id、class 或 jQuery 的按钮文本，并将这些文本写入 p 标签。我的简单测试代码如下。我希望你明白我想做什么。

            <button>Button 1</button>
            <button>Button 2</button>
            <p id="result" ></p>


            <script type="text/javascript">
                function tagName(tag){
                    var buttons = document.getElementsByTagName(tag);
                    var totalButton = buttons.length;

                    for(var i=0;i<totalButton;i++){
                        // here i want to check which button clicked?
                    }

                };

                    tagName("button").onclick = function(){
                    document.getElementById("result").innerHTML = tagName("button").innerHTML;
                }
            </script>

你能帮我完成这段代码吗？ 注意：我只有一个函数tagName()

Answer 1

尝试这样的事情：

var obj = document.getElementsByTagName("button");

for (let item of obj) {
  item.onclick = function(){
    document.getElementById("result").innerHTML = item.innerHTML;
  }
}

Answer 2

<html>

<head>
    <script>
        function tagName(tag) {
            var buttons = document.getElementsByTagName(tag);
            var totalButton = buttons.length;

            var r = []
            for (var i = 0; i < totalButton; i++) {
                // here i want to check which button clicked?
                r.push(buttons[i])
            }
            return r;
        };

        function onLoad() {
            tagName("button").forEach(function (item, idx) {
                item.addEventListener('click', function () {
                    document.getElementById("result").innerHTML = item.innerHTML;
                });
            });
        }

    </script>
</head>

<body onload="onLoad()">
    <button>Button 1</button>
    <button>Button 2</button>
    <p id="result"></p>


    <script type="text/javascript">

    </script>
</body>

</html>

Answer 3

我相信这会如你所愿。它使用更现代的 Javascript，因此它不适用于旧版本的 IE。

<button>Button 1</button>
<button>Button 2</button>
<p id="result" ></p>


<script type="text/javascript">
    function setButtonEvents(){
        let buttons = document.querySelectorAll("button");  // (returns a nodeList, like an array)

        for(let b of buttons){
            // here i want to check which button clicked?
            b.onclick=buttonClicked;
        }

    };

    function buttonClicked(e) {
        document.getElementById("result").innerHTML = e.target.innerHTML;
    }
  setButtonEvents();
</script>

Answer 4

如果您尝试根据单击的按钮更改 p 标记文本，则可以这样实现。

<script type="text/javascript">
window.onclick = function(e) {

    var isButton = e.target.tagName;

    if (isButton === "BUTTON") {
      var text = e.target.innerText
      document.getElementById("result").innerHTML = text;
    }
};

如何通过没有 id、class 或 jQuery 的 tagName 获取按钮？

How can get button by tagName without id, class or jQuery?

javascript

getelementsbytagname