Question

更改按钮颜色时出错“TypeError：null 不是对象（评估‘document.getElementById(‘button’+x+'').style’）”

2022-04-02

280

javascript html css

我试图更改我的 html 网站中多个按钮的颜色，但是运行时遇到错误。

HTML：

<body style="background-color:rgb(216, 216, 216);">
             
            <button id=button0 type="button" class="block" onclick="likeAction();">LIKE</button>
            
            <button id=button1 type="button" class="block" onclick="likeAction();">LIKE</button>
            
            <button id=button2 type="button" class="block" onclick="likeAction();">LIKE</button>
             
            <button id=button3 type="button" class="block" onclick="likeAction();">LIKE</button>
            
            <button id=button4 type="button" class="block" onclick="likeAction();">LIKE</button>
            
            <button id=button5 type="button" class="block" onclick="likeAction();">LIKE</button>
</body>

JS：

async function likeAction(){
                for (let x = 0; x < 6; x++) {
                    document.getElementById('button'+x+'').style.backgroundColor = 'salmon';
                }
            }

错误：

Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'document.getElementById('button'+x+'').style')

Answer 1

更改

id=button0

->

id="button0"

并更改

document.getElementById('button'+x+'')

->

document.getElementById('button'+x)

Answer 2

您需要更改一些代码，如下所示。

首先，您需要将 HTML 中的 id 属性更改为如下所示，以使其不无效。

<button id="<id>"></button>

基本上，用引号将 ID 文本括起来。

此外，在您的 JavaScript 中，将您的 getElementById 函数更改为此。

document.getElementById("button" + x);

这是因为额外的空字符串是多余的。

总之，您收到错误是因为 HTML 不理解 ID，因为您没有正确输入它。