0

A ver si alguien que puede iluminar

Llevo todo el día liado con la forma de cambiar una imagen al hacer click en otra mediante javascript, pero a la hora de llamar a un elemento del documento, me arroja el valor null

Tengo el id = "UnoUno" en la imagen del documento HTML;

Al hacer click en ella, mediante el evento onclick, envío por parámetro el id de la imagen y la posición que ocupa, en éste caso sería "UnoUno" y "0"

En la función que recibe el evento onclick intento hacer referencia a la imagen en la que hice click para cambiarla por otra, y siempre recibo null

let ele = "#" + elemento; //resultado: "#UnoUno"
let control = document.getElementById(ele); //control: null

Llevo con éste error unas cuántas horas, he buscado, leído, releído y no consigo dar con el error que estoy causando

¿Qué estoy haciendo mal?

Parte del fichero afectado HTML:

 <body>
     <main>
         <section class="section">  
              <table class="table">
                 <tr>
                     <td>
                         <img id = "UnoUno" class="img" src="./img/reverso.png" alt="imagen11" onclick="abrirImagenClick('UnoUno', '0')">
                     </td>
                 </tr>
             </table>
         </section>
     </main>
 </body>

Parte del fichero afectado CSS

.table tr td img:hover
{
    border: 3px solid #fe0101;
}

.img
{
    height: 150px;
    width: 110px;
}

Parte afectada del fichero javascript

//recibo por parámetro con el evento onclick, el elemento cliqueado y la posición que ocupa
function abrirImagenClick(elemento, posicion)
{
    //variable que concatena el elemento con la almohadilla
    let ele = "#" + elemento;
    //variable que debería de almacenar el elemento del documento donde deseo cambiar la imagen
    //pero me devuelve null
    let control = document.getElementById(ele);
    imagen = document.createElement("img");

    imagen.src = "img/" + barajaBarajada[posicion];

    //control.appendChild(imagen);
}
3
  • Pon esto: let control = document.getElementById(elemento); porque el # sobra en un getElementById
    – masterguru
    Commented el 23 oct. 2022 a las 23:37
  • como te dijeron usar el simbolo # buscando por id es redundante. El metodo ya aclara que busca un id entonces no es necesario usar # Commented el 23 oct. 2022 a las 23:41
  • Pues muchas gracias. Madre mía, un día entero buscando el problema y no tenía ni idea de que estaba pasando.
    – el.trasgu
    Commented el 24 oct. 2022 a las 6:38

2 respuestas 2

1

getElementById espera el ID de la etiqueta pero tu le agregas # al comienzo por lo tanto falla.

Debes agregar el # cuando escribes un selector CSS. Por ejemplo la función querySelector sí lo requiere.

function mostrarTexto(){
    byId = document.getElementById("texto")
    selector = document.querySelector("#texto")
    console.log(byId.value)
    console.log(selector.value)
}
<input id="texto" value="Hola" type="text"/>
<input type="button" value="Imprimir" onclick="mostrarTexto()"/>

1
  • Pues muchas gracias. Madre mía, un día entero buscando el problema y no tenía ni idea de que estaba pasando.
    – el.trasgu
    Commented el 24 oct. 2022 a las 6:38
1

Como te señalaron en los comentarios. getElementById no va con #. Pero además es que no necesitas buscar la imagen por la id, ya que la puedes enviar directamente en el evento usando this

<img class="img" src="./img/reverso.png" alt="imagen11" onclick="abrirImagenClick(this,0)">
function abrirImagenClick(imagen, posicion)
{
    imagen.src = "img/" + barajaBarajada[posicion];
}
1
  • Pues muchas gracias. Madre mía, un día entero buscando el problema y no tenía ni idea de que estaba pasando.
    – el.trasgu
    Commented el 24 oct. 2022 a las 6:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.