Estoy tratando de mover mi robot hacia la derecha alternando entre dos clases, pero parece que no funciona. Por favor ayuda. Creó dos clases y estaba tratando de cambiar entre dos de esas clases con alternar pero no funcionaba.
function moveR() { let robot = document.getElementsByClassName("robot1"); robot.classList.toggle = "moveRight"; } .robot1 { position: absolute; width: 50px; height: 50px; } #moveRightBtn { position: absolute; top: 300px; font-size: 20px } .moveRight { animation-name: moveRight; animation-duration: 3s; } @keyframes moveRight { from { transform: translateX(0); } to { transform: translateX(100px); } } <h1 id="Header1">Keyframe Practice</h1> <h2>Moving The Robot To Right</h2> <img class="robot1" src="https://cdn-icons.flaticon.com/png/512/630/premium/630426.png? token=exp=1636183057~hmac=45b700055844fa031977edfa2ee4457b"> <button onclick="moveR()" id="moveRightBtn">Move Right</button>Su código tiene dos problemas principales.
getElementsByClassName devuelve una matriz. Solo quieres el primer elemento. Un método alternativo es usar querySelector(".robot1") que devuelve la primera coincidencia.classList.toggle es una función, no tiene que asignar (con = ) la clase, sino pasarla como parámetro.Estas dos líneas cambiadas en su código, todo lo demás está bien:
let robot = document.querySelector(".robot1"); robot.classList.toggle("moveRight"); function moveR() { let robot = document.querySelector(".robot1"); robot.classList.toggle("moveRight"); } .robot1 { position: absolute; width: 50px; height: 50px; } #moveRightBtn { position: absolute; top: 300px; font-size: 20px } .moveRight { animation-name: moveRight; animation-duration: 3s; } @keyframes moveRight { from { transform: translateX(0); } to { transform: translateX(100px); } } <h1 id="Header1">Keyframe Practice</h1> <h2>Moving The Robot To Right</h2> <img class="robot1" src="https://cdn-icons.flaticon.com/png/512/630/premium/630426.png? token=exp=1636183057~hmac=45b700055844fa031977edfa2ee4457b"> <button onclick="moveR()" id="moveRightBtn">Move Right</button>