Javascriptを使用してナビゲーションメニューリンクをクリックすると、ページの背景イメージを変更するにはどうすればよいですか？

Question

JavaScriptを使用してナビゲーションリンクをクリックしたときにページの背景イメージを変更するにはどうすればよいですか？

<li><a href="#"id="bd"onclick ="one()">facial</a></li> 

<script> 
function one(){ 
    document.getElementById('bd').style.background-image=url(eye.jpg); 
    } 
</script> 

Answer 1

背景画像は、backgroundImageで更新することができ、その値は、文字列はそれほど重引用符でそれをラップする必要があります。

<li><a href="#" id="bd" onclick="one()">facial</a> 
 
</li> 
 

 
<script> 
 
    function one() { 
 
    document.getElementById('bd').style.backgroundImage = 'url(eye.jpg)'; 
 
    } 
 
</script>

---

また、あなたは、要素の参照を渡すことによって、コードを簡素化することができます。

<li><a href="#" id="bd" onclick="one(this)">facial</a> 
 
</li> 
 

 
<script> 
 
    function one(ele) { 
 
    ele.style.backgroundImage = 'url(eye.jpg)'; 
 
    } 
 
</script>

Answer 2

あなたは、背景画像にクラスを設定してからちょうどJavaScriptでそのクラスを追加することができます。あなたはまた、あなたがする必要がある任意のスタイリングを行うことができます

.eye { 
    background-image: url(eye.jpg); 
} 

function one() { 
    document.getElementById('bd').classList.add('eye'); 
} 

その方法イメージでやりなさい。