2

He tratado de cambiar una imagen en html usando javascript cuando el valor de p1 sea igual a 1 y el de p2 sea igual a 10 pero no me funciona con el código que estoy ocupando

function verificar(){
    var p1 = document.getElementById("p1").value;

    if (p1 == 1) {
        document.getElementById("1").innerHTML = "<img src=circuloazul.png>"
    }
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="main.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="b">
        <img src="default.png" alt="a" id="1">
    </div>
    <div>
        <input type="text" id="p1">
        <input type="text" id="p2">
        <button onclick="verificar()" class="button"></button>
    </div>
</body>
</html>

7
  • No crees que es por que estas comparando un string con un entero?
    – Christian
    Commented el 21 jul. 2021 a las 18:58
  • @Christianen en que parte?
    – Rom
    Commented el 21 jul. 2021 a las 19:00
  • p1 == 1, prueba con parseInt(p1) == 1 y lo mismo para p2
    – Christian
    Commented el 21 jul. 2021 a las 19:02
  • 1
    @Christian en JavaScript "1" == 1 será true de todas formas. ;)
    – Israel-ICM
    Commented el 21 jul. 2021 a las 19:02
  • 1
    Que hace esa coma , en la condición?
    – Christian
    Commented el 21 jul. 2021 a las 19:05

2 respuestas 2

3

si sólo necesitas cambiar el src de la imagen, el innerHTML no te sirve. Lo deberías hacer así.

document.getElementById("1").setAttribute('src, 'circuloazul.png');

Lo de innerHTML sirve cuando seleccionas el padre de la imagen, en ese caso es el div.b

0

Estas cambaindo el contenido de la etiqueta img, lo que hace tu funcion es anidar una etiqueta img en otra etiqueta img:

 <div class="b">
        <img src="default.png" alt="a" id="1">
          <img src=circuloazul.png>
        </img>
 </div>

lo que no se puede interpretar en html, la respuesta correcta seria cambiar el elemento al que le estas modificando el id, en este caso sería a la class="b" no al id="1":

if (p1 == 1) {
    var x = document.getElementsByClassName("b");
    x[0].innerHTML = "<img src=circuloazul.png>"
}

aunque lo mas aconsejable seria que a ese div con esa clase le agregues un ID, recuerda que las clases pueden ser usadas en multiples elementos lo que ne puede generar comportamientos no deseados.

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.