<select>を使用してヘッダーの色を変更する際の問題 - 要素

Question

現在、JavaScriptを使用してDOMイベント "onchange"の助けを借りて要素の色を変更しようとしています。

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>