使用 -element 更改标题颜色的问题<select>

Question

我当前正在尝试在dom -event" on Change"的帮助下使用JavaScript更改元素的颜色。

function changeColor() {
    var myHeader = document.getElementById("header");
    var mySelect = document.getElementById("select");
    header.style.color = mySelect.value;
}

<h4 id="header">This is my header!</h4>
<form>
<select id="select" name="select" onchange="changeColor()">
    <option value="black">Black</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
</select>
</form>

我认为问题在函数内部的最后一行。请帮助朋友出去！

Answer 1

尽管您的代码正在工作

function changeColor() {
    var myHeader = document.getElementById("header");
    var mySelect = document.getElementById("select");
    header.style.color = mySelect.value;
}

<h4 id="header">This is my header!</h4>
<form>
<select id="select" name="select" onchange="changeColor()">
    <option value="black">Black</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
</select>
</form>

但是您应该使用以下的适当代码，使用myHeader代替header

function changeColor() {
    var myHeader = document.getElementById("header");
    var mySelect = document.getElementById("select");
    myHeader.style.color = mySelect.value;
}

<h4 id="header">This is my header!</h4>
<form>
<select id="select" name="select" onchange="changeColor()">
    <option value="black">Black</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
</select>
</form>