javascriptを使用してhtmlの要素のクラスを変更する

Question

キーボードのボタンを押すと、画像のクラスを変更しようとしています（）。これが機能していないか、私は内に正しくJavaScriptを使用している場合でも、なぜこれほど見当がつかない私はHTMLとJavaScriptの両方に非常に新しいです

<div id="images" class="img"/> 
<img src="spiderman.png" alt=""/> 
<img src="superman.png" alt="" height="25%" width="25%"/> 
<img src="batman.png" alt="" /> 
</div> 

<Script type="text/javascript"> 
    function keyDown(event) { 
     if (event.keyCode == 65) { 
     var canvas = document.getElementById('images'); 
     canvas.innerHTML = '<img class="img2" />' 
     } 
    } 
    function keyUp(event) { 
    if (event.keyCode == 65) { 
    var canvas = document.getElementById('images'); 
    canvas.innerHTML = '<img class="img" />'; 
    } 
} 
</script> 

CSS

.img { 
    position: absolute; 
    right: 15%; 
    top: 30%; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
} 
.img2 { 
box-shadow: 0px 0px 5px #fff; 
    position: absolute; 
    right: 15%; 
    top: 30%; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
} 

：私は、次のコードを書かれています私のHTMLは、私が可能にしようとしているものですか？正しい方向のポイントは役に立ちます:)

Answer 1

あなたのコードでは、要素クラスを置き換えていません。あなたは画像そのものを置き換えています。あなたがCLASを変更したい場合は、この使用：

document.getElementById("MyElement").className = "MyOtherClass" 

をだから、のようなものになるだろう：

(function() { 
 

 
    function keyDown(event) { 
 
    if (event.keyCode == 65) { 
 
     if (document.getElementsByClassName("img").length > 0) { 
 
     document.getElementsByClassName("img")[0].className = "img2" 
 
     } else { 
 
     document.getElementsByClassName("img2")[0].className = "img" 
 
     } 
 
    } 
 
    } 
 

 
    document.addEventListener('keydown', keyDown); 
 
})();

.img { 
 
    width: 100px 
 
} 
 

 
.img2 { 
 
    width: 400px 
 
}

<img class="img" src="http://www.axpe-blogs.com/wp-content/uploads/stackoverflow_logo.jpg" />