时间戳

首页 > 解决方案 > 为什么 push 方法没有将项目添加到数组中？

javascript - 为什么 push 方法没有将项目添加到数组中？

问题描述

你能告诉我为什么 copy.AllButtons.push 不起作用吗？谷歌浏览器控制台：

HTMLCollection []
    0: button.btn.btn-primary
    1: button.btn.btn-danger
    2: button.btn.btn-warning
    3: button.btn.btn-success
    length: 4
    __proto__: HTMLCollection
script.js:9 

[]
length: 0
__proto__: Array(0) <-Why this array is empty?


let all_buttons = document.getElementsByTagName('button');
console.log(all_buttons);
const copyAllButtons = [];
for (let i=0; i < all_buttons.length; i++){
    copyAllButtons.push(all_buttons[i]);
}
console.log(copyAllButtons);
#main_container{
    width: 75%;
    margin: 0 auto;
    text-align: center;
}
.flex-box-pick-color{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Challenge 4</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src='script.js'></script>
</head>
<body>
    <div id='main_container'>
        <div class = 'container-2'>
            <h2 id='changeMyColor'>Challenge 4: Change the color of all buttons!</h2>            
        </div>
        <div class = 'flex-box-pick-color' id='game'>
            <form action=''>
                <select name='backdrop' id='background' onchange="buttonColorChange(this)">
                    <option value="random">Random</option>
                    <option value="Red">Red</option>
                    <option value="green">Green</option>
                    <option value="reset">Reset</option>
                </select>
            </form>
            <button class='btn btn-primary'>Wee!</button>
            <button class='btn btn-danger'>Yahoo</button>
            <button class='btn btn-warning'>Google!</button>
            <button class='btn btn-success'>Facebook!</button>
            
        </div>
        
    </div>
</body>
</html>

标签： javascripthtmlarrayspush

解决方案

由于您的脚本在head,all_buttons运行时将是一个空集合 - 因此循环中的任何代码都不会实际执行。

你console.log(all_buttons)是非空的，因为该getElementsByTagName 方法返回一个“实时”集合，并且由于浏览器控制台“懒惰地”记录对象的方式，你看到的是后一个值，而不是你记录它时的那个值。

在几个可能的修复中，最简单和最佳的做法就是将您的脚本移动到body.

推荐阅读