Estoy tratando de cambiar el color de varios botones en mi sitio web html, sin embargo, me encuentro con errores cuando se ejecuta.
HTML:
<body style="background-color:rgb(216, 216, 216);"> <button id=button0 type="button" class="block" onclick="likeAction();">LIKE</button> <button id=button1 type="button" class="block" onclick="likeAction();">LIKE</button> <button id=button2 type="button" class="block" onclick="likeAction();">LIKE</button> <button id=button3 type="button" class="block" onclick="likeAction();">LIKE</button> <button id=button4 type="button" class="block" onclick="likeAction();">LIKE</button> <button id=button5 type="button" class="block" onclick="likeAction();">LIKE</button> </body>JS:
async function likeAction(){ for (let x = 0; x < 6; x++) { document.getElementById('button'+x+'').style.backgroundColor = 'salmon'; } }ERROR:
Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'document.getElementById('button'+x+'').style')Cambio
id=button0->
id="button0"y cambio
document.getElementById('button'+x+'')->
document.getElementById('button'+x)Necesita cambiar algún código, como se muestra a continuación.
Primero, debe cambiar su atributo de id en su HTML para que sea así, para que no sea inválido.
<button id="<id>"></button>Básicamente, rodee el texto de identificación con comillas.
Además, en su JavaScript, cambie su función getElementById a esto.
document.getElementById("button" + x);Esto se debe a que la cadena vacía adicional es redundante.
En resumen, estaba recibiendo el error porque el HTML no entendía la ID, ya que no la había escrito correctamente.