JavaScript - Error con un addEventListener

 
Vista:
sin imagen de perfil
Val: 50
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error con un addEventListener

Publicado por valentin (24 intervenciones) el 04/04/2020 01:45:14
Me sale este error: Uncaught TypeError: Cannot read property 'addEventListener' of null
at index.js:47

Soy muy novato en esto y no puedo solucionarlo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
let randomNumber = Math.floor(Math.random() * 100) + 1;
 
const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');
 
const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');
 
let guessCount = 1;
let resetButton;
 
function checkGuess() {
    let userGuess = Number(guessField.value);
    if (guessCount === 1) {
        guesses.textContent = 'Intentos anteriores: ';
    }
    guesses.textContent += userGuess + ' ';
 
    if (userGuess === randomNumber) {
        lastResult.textContent = '¡Felicidades! ¡Lo adivinaste!';
        lastResult.style.backgroundColor = 'green';
        lowOrHi.textContent = '';
        setGameOver();
    } else if (guessCount === 10) {
        lastResult.textContent = '!!!¡¡¡Fin del juego!!!!!!';
        setGameOver();
    } else {
        lastResult.textContent = '¡Equivocado!';
        lastResult.style.backgroundColor = 'red';
        if (userGuess < randomNumber) {
            lowOrHi.textContent = '¡El numero es muy bajo!!';
        } else if (userGuess > randomNumber) {
            lowOrHi.textContent = '¡El numero es muy grande!';
        }
    }
 
    guessCount++;
    guessField.value = '';
    guessField.focus();
 
 
}
 
guessSubmit.addEventListener('click', checkGuess);
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 91
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error con un addEventListener

Publicado por Alfredo (36 intervenciones) el 04/04/2020 05:24:22
Este codigo debe correr despues que has escrito el html del boton al que le estas agregando el click
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 50
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error con un addEventListener

Publicado por valentin (24 intervenciones) el 04/04/2020 21:47:12
Ese boton ya estaba agregado
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error con un addEventListener

Publicado por joel (895 intervenciones) el 05/04/2020 10:00:04
Hola Valentin, si haces un
1
console.log(guessSubmit);
que te devuelve?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 50
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error con un addEventListener

Publicado por valentin (24 intervenciones) el 05/04/2020 13:17:54
Me devuelve null

Esta es la parte del html:
1
2
3
4
<div class="form">
  <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
  <input type="submit" value="Enviar intento" class="guessSubmit">
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error con un addEventListener

Publicado por joel (895 intervenciones) el 05/04/2020 19:01:25
Hola Valentin, parece estar todo bien, lo único que se me ocurre, es que el código javascript se ejecute antes que el código html.
Podría ser?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 50
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error con un addEventListener

Publicado por valentin (24 intervenciones) el 05/04/2020 21:08:17
Era eso, muchas gracias Joel.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Error con un addEventListener

Publicado por lucas (1 intervención) el 13/09/2023 02:28:53
En tu código, estás obteniendo un error en la línea 47, que es donde estás intentando agregar un evento "click" al elemento guessSubmit. Esto sugiere que en ese momento, el elemento guessSubmit no se está encontrando en el documento.

Para solucionar este error, asegúrate de que tu código HTML incluya un elemento con la clase guessSubmit. Debe haber algo como esto en tu HTML:

html
copia el siguiente codigo:
<button class="guessSubmit">Enviar</button>
Asegúrate de que el botón con la clase guessSubmit exista en tu HTML antes de que se ejecute el JavaScript. Si el elemento existe y todavía estás obteniendo el error, es posible que estés ejecutando tu código JavaScript antes de que el DOM (Document Object Model) esté completamente cargado. En ese caso, puedes envolver tu código JavaScript en un evento "DOMContentLoaded" para asegurarte de que se ejecute después de que se cargue la página:

javascript
copia el siguiente codigo:
document.addEventListener('DOMContentLoaded', function() {
// Tu código JavaScript aquí
});
De esta manera, te aseguras de que el código JavaScript se ejecute después de que todos los elementos HTML estén disponibles en el DOM. Esto debería solucionar el error.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar