Problemas en la evaluación del Reloj 25 + 5

Español JavaScript
#1

Cuéntanos qué está pasando:
Concluí la aplicación, revisé manualmente que se cumplieran las historias de usuario y procedí a subir el proyecto a la plataforma codepen . io
Al realizar las pruebas (tests) me indica que pasan 0/29.

Tu código hasta el momento
Mi codigo

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 Safari/537.36

Desafío: Construye un reloj 25 + 5

Enlaza al desafío:

#2

Always read the full error. It is trying to give you valuable information.

  1. “before each” hook for “You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!”

Uncaught TypeError: Cannot read properties of null (reading ‘play’) (https://cdn.skypack.dev/-/react-dom@v17.0.1-oZ1BXZ5opQ1DbTh7nu9r/dist=es2019,mode=imports/optimized/react-dom.js:1716)
Error: Uncaught TypeError: Cannot read properties of null (reading ‘play’) (https://cdn.skypack.dev/-/react-dom@v17.0.1-oZ1BXZ5opQ1DbTh7nu9r/dist=es2019,mode=imports/optimized/react-dom.js:1716)

What is important is the lines:

Uncaught TypeError: Cannot read properties of null (reading ‘play’)

and

Error: Uncaught TypeError: Cannot read properties of null (reading ‘play’)

They are basically saying the same thing - somewhere it is trying to read a property “play” on an object that is null. That causes JS to crash.

I look around and find this:

  const resetTimer = () => {
    alarma.play();
    clearInterval(timerId.current);
    timerId.current = 0;
    setTimerState(0);
    cuentaAtras.current = 0;
    setTiempoAtras(0);
    setActiveTimer('session');
  }

It makes sense that the first thing any test is going to do is hit the “reset” button. If I put in a log statements like this:

  const resetTimer = () => {
    console.log('alarma', alarma)
    alarma.play();
    clearInterval(timerId.current);
    timerId.current = 0;
    setTimerState(0);
    cuentaAtras.current = 0;
    setTiempoAtras(0);
    setActiveTimer('session');
  }

It logs out:

alarma null

So, that is where your error is happening.

My first question would be: Why are we trying to play a beep on a reset? Resets should be about resetting.

Why isn’t it defined? You try to grab it here:

const alarma = document.getElementById('beep');

First of all, that is a bad pattern. you shouldn’t be accessing document in your code (except in ReactDOM.render). You should be using a ref for this. But why isn’t it defined? I would guess because it is early in the function and that section of the DOM hasn’t been defined yet. Remember that that is going to be rerun every time the component rerenders. But again, you shouldn’t be doing it this way, anyway. You want a ref. I think you’d want the useRef hook.

In any case, if I get rid of that alarma.play() in resetTimer, you start passing some of the tests.

#3

Thanks, kevinSmith. I change the audio label to HTML file and solved the issue.

Finally I completed all tests (29/29) after some more adjustments.