0

Mi problema se describe fácilmente, normalmente al iniciar la pagina arriba me debe salir un contador como este: introducir la descripción de la imagen aquí

Bueno, a la hora de dar click al botón rojo debe aparecer un puntaje al lado del tiempo, pero mi problema es que a la hora de dar click al botón el contador desaparece y lo remplaza el puntaje:

introducir la descripción de la imagen aquí

Según yo mi código debe hacer que este a ladito no que lo remplace.

Error en la consola: Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    at restarTiempo (script.js:21)
restarTiempo    @   script.js:21

document.getElementById('player').addEventListener("mouseover", sumarPuntos);

puntos = 0;
tiempo = 60;
necesarios = 30;

function sumarPuntos() {
    puntos++;
    document.getElementById("puntos").innerHTML = "Puntos: <b>" +
        puntos + "/" + necesarios + "</b>";
    randNum = Math.round(Math.random() * 420);
    randNum2 = Math.round(Math.random() * 420);
    document.getElementById("player")
        .style.marginTop = randNum + "px";
    document.getElementById("player")
        .style.marginLeft = randNum2 + "px";
}

function restarTiempo() {
    tiempo--;
    document.getElementById("tiempo").innerHTML = "  Tiempo: " + tiempo;
}

setInterval(restarTiempo, 1000);
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>

<body>
    <div class="contenedor pointer" id="puntos">
        <span id="puntos"></span>
        <span id="ned"></span>
        <span id="tiempo"></span>
    </div>
    <div class="contenedor">
        <div id="player"></div>
    </div>
    <script src="js/script.js"></script>
</body>

</html>

1
  • 2
    Tu problema es sencillo. Has duplicado el id de un elemento, por ello el error. Remueve el atributo id="puntos" del div con clase contenedor y tu problema estará resuelto. el 29 nov. 2021 a las 18:38

2 respuestas 2

0

Tienes 2 ID's con el mismo nombre, intenta cambiando uno de los ID's

<span id="puntos"></span> --> <span id="span-puntos"></span>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>

<body>
    <div class="contenedor pointer" id="puntos">
        <span id="span-puntos"></span>
        <span id="ned"></span>
        <span id="tiempo"></span>
    </div>
    <div class="contenedor">
        <div id="player"></div>
    </div>
    <script src="js/script.js"></script>
</body>

</html>

0

Tienes el id del div padre igual que el span adentro, el ID "puntos", al momento de hacer el getElementById te está tomando el padre, y al ser un inner lo que hace es reemplazar todo su contenido, en tu getElementById debes invocar al Id del Span... También asegurate de que evento quieres para lanzar la función, no tienes declarado un click sino mouseover.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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