Ändern der Klasse eines Elements in HTML mit Javascript

Question

Ich versuche derzeit, die Klasse einer Reihe von Bildern zu ändern, wenn ich eine Taste auf meiner Tastatur (a) drücken. Ich habe den folgenden Code geschrieben:

<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; 
} 

Ich bin sehr neu in HTML und JavaScript hat so keine Ahnung, warum dies nicht funktioniert oder auch wenn ich JavaScript verwendet korrekt innerhalb Mein HTML ist, was ich versuche zu erreichen, sogar möglich? Ein Punkt in die richtige Richtung wäre hilfreich :)

Answer 1

In Ihrem Code ersetzen Sie nicht die Elementklasse. Sie ersetzen das Bild selbst. Wenn Sie die cla ändern möchten verwenden diese:

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

So etwas zu sein, es geht wie:

(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" />