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);
}
let control = document.getElementById(elemento);
porque el#
sobra en un getElementById