尝试更改子 div 属性时出错

Question

我在第 document.getElementById(blueChild).style.border = "2px solid white" 行收到错误 Uncaught TypeError: Cannot read property 'style' of null，我已经在线查看但没有找到解决方案。这是我的代码：

var scroller = function(direction, team){
    console.log("scrolling")
    if (team == "blue"){
        if (direction == "left"){
            blueCount = blueCount - 1
        }

        if (blueCount < 0){
            blueCount = 3
        }
        if (redCount < 0){
            redCount = 3    
        }

        var blueChildren = document.getElementById('blueSelector').getElementsByTagName('div')
        var blueChild = blueChildren[blueCount]
        document.getElementById(blueChild).style.border = "2px solid white"

        for (var i = 0; i < blueChildren.length; i++){
            if (i !== blueCount){
                blueChild = blueChildren[i]
                document.getElementById(blueChild).style.border = "2px solid black"
            }
        }
    }
}

scroller("left", "blue")

顺便说一下，blueCount、redCount 的全局默认值为 0

很多要求HTML

<html>
<head>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="main.css">
    <script src="jquery.js"></script>
    <script src="rectangle.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <canvas id="canvas">You're browser does not support the canvas tag. Go and get a real browser, nub</canvas>
    <div id="redSelector">
        <div class="genericButton" id="zombieRed">Zombie</div>
        <div class="genericButton" id="skeletonRed">Skeleton</div>
         <div class="genericButton" id="creeperRed">Creeper</div>
        <div class="genericButton" id="spideBlue">Spider</div>
    </div>
    <div id="blueSelector">
        <div class="genericButton" id="zombieBlue">Zombie</div>
        <div class="genericButton" id="skeletonBlue">Skeleton</div>
         <div class="genericButton" id="creeperBlue">Creeper</div>
        <div class="genericButton" id="spiderBlue">Spider</div>
    </div>
</body>

我想要实现的是评估 blueSelector 的子元素，并制作一个带有白色边框的颜色，其余部分带有黑色边框。

Answer 1

您只需要这样做：

blueChild.style.border = "2px solid white"

和

blueChild.style.border = "2px solid black"

因为您创建的 blueChild 变量指向 HTML 元素，而不是表示 ID 的字符串。

编辑：哦，你忘记引用了：

               here
                 ↓
scroller("left", "blue")

Answer 2

我找到解决办法了！结果我使用 var blueCount 定义了 blueCount 并且当我将变量用作 blueChildren 数组中的索引时，blueCount 是 undefined 而 blueChild 然后未定义。

希望人们从我愚蠢的错误中吸取教训 xD

尝试更改子 div 属性时出错

Error when attempting to change child div properities

html

javascript

tags

children