如何将 document.getElementById( ) 用作函数的一部分，并将目标 ID 作为参数传递

Question

我正在尝试使用 document.getElementById 定位按钮。单击按钮时，我希望按钮的颜色变为红色。

我的代码目前如下所示：

function selectDay (value) {
    var id = '"' + value + '"';
    console.log(id)
    document.getElementById(id).style.backgroundColor = "red";
}

当我检查 id 的值时，它总是正确的。

例如，如果单击一个 ID 为 1 的按钮，那么在控制台中我将显示“1”。 document.getElementById("1") 应该可以工作，但我收到一条错误消息：

Cannot read property 'style' of null.

我已经仔细检查过 html 中的 id 绝对正确。

Answer 1

去掉引号，直接用value即可：document.getElementById(value)

您在代码中按字面意义编写 ID 时使用引号，因为这告诉 JavaScript 您在代码中编写的是一个字符串。但是在您的代码中，value 是一个参数（几乎等同于变量）。您想要使用该参数的值。

Answer 2

函数selectDay (value)中，参数value为字符串数据类型

并且在函数document.getElementById (id)中，id也是字符串数据类型。

因此您可以简单地使用：

function selectDay (value) {
    document.getElementById(value).style.backgroundColor = "red";
}

并将其用作：

selectDay("button1")

OR

selectDay('button2')

OR

const button_id = "button3"
selectDay(button_id)

你的代码出了什么问题

selectDay("button1"); //lets suppose we call the function like this

function selectDay (value) {   //here value = [ b, u, t, t, o, n, 1] and is of type string
    var id = '"' + value + '"';//here id = [ ", b, u, t, t, o, n, 1, "] and is of type string
    console.log(id)
    document.getElementById(id).style.backgroundColor = "red";/*
here you function getElementById will return an error.

since there is no element in the HTML body that has attribute id = "\"button1\"" (which is [ ", b, u, t, t, o, n, 1, "])

the element you are trying to access has attribute id = "button1" (which is [ b, u, t, t, o, n, 1])
*/
}

如何将 document.getElementById( ) 用作函数的一部分，并将目标 ID 作为参数传递

How do you use document.getElementById( ) as part of a function with the target id being passed as the parameter

javascript

dom

getelementbyid