尝试更改子 div 属性时出错答案

【问题标题】：Error when attempting to change child div properities尝试更改子 div 属性时出错
【发布时间】：2015-03-24 19:55:43
【问题描述】：

我在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 的子元素，并制作一个带有白色边框的颜色，并用黑色边框休息。

【问题讨论】：

考虑分号。如果不出意外，它会让你的代码更容易解释。
HTML 是什么样的？请发布一个完整的代码示例。
document.getElementById(blueChild) 返回空值。否则，这条线应该可以工作。再次检查 ID 的拼写，单独执行命令document.getElementById(blueChild) 验证是否返回 null。

标签： javascript html tags children

【解决方案1】：

你只需要这样做：

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

和

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

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

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

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

【讨论】：

提交工作。我现在收到错误 Uncaught TypeError: Cannot read property 'style' of undefined
@JammehCarr 我编辑了我的答案，你似乎忘记了一句话
我添加了 HTML，你现在可以根据那个来询问你的问题吗？
@JammehCarr 当您更改我所说的内容时效果很好：jsfiddle.net/4rpyqmb8
但是您需要加载文档。将 <script> 标签放在结束 </body> 标签的正上方。

【解决方案2】：

我找到了解决办法！原来我使用var blueCount 定义了blueCount，当我使用该变量作为blueChildren 数组中的索引时，blueCount 是undefined，然后blueChild 未定义。

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

【讨论】：