Pomodoro clock works perfectly but it doesn't pass (TypeError: Cannot read property '1')) Why?!

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
background-color: lightblue;
height: 450px;
width:450px;
margin: auto;
}
#display
{
grid-column: 1/3;
border:solid black 2px;
grid-row:1/4;
 border-radius:50%;
}
#controls
{
grid-column: 1/3;
grid-row: 4/5;
border:solid black 2px;
}
#settings
{
grid-column: 3/4;
grid-row:1/5;
border:solid black 2px;
padding:10px;
}
#controls button{
width:50%;
}
#display div{
margin-top: 80px;
text-align:center;
font-family:forte;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My Podmoro Clock</h1>
<div class="container">
<div id="display"><div id="timer-label">Session</div>
<div id="time-left">25:00</div>
</div>
<div id="settings"><p id="break-label">Break Length<p><button id="break-increment" class="adjust">+</button><br><div id="break-length">5</div><br>
<button id="break-decrement" class="adjust">-</button>
<br><br><br><br>
<p id="session-label">Session Length<p><button id="session-increment" class="adjust">+</button><br><div id="session-length">25</div><br>
<button id="session-decrement" class="adjust">-</button>
</div>
<div id="controls"><button id="start_stop" onclick="theSwitch()">Play| Pause</button><button id="reset">Reset</button></div>
</div></div>
<audio id="beep" controls src="http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg"></audio>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
//alert("works here")
$(".adjust").click(function(){adjustDisplay($(this).attr("id"));});
$("#reset").click(function(){resetClock()});
});
</script>

<script>
var runningCon=false;
var currentSLength = 25;
var currentBLength =5;
var secondsL = 60;
var AtStart =[25,5];
var timer;//session timer
var timer2; // break timer
var displayTimeLeft = document.getElementById("time-left");
//WORK ON DISPLAY HERE
function adjustDisplay(id)
{
//alert("we have lift-off")
//first ensure that timer isn't running! Come back later
if(id == 'break-decrement')
{
currentBLength--;
currentBLength>=1? document.getElementById("break-length").innerHTML = currentBLength: currentBLength=1;
}
if(id == 'break-increment')
{
currentBLength++;
currentBLength<=60? document.getElementById("break-length").innerHTML = currentBLength: currentBLength=60;
}
if(id == 'session-decrement')
{
currentSLength--;
currentSLength>=1? document.getElementById("session-length").innerHTML = currentSLength: currentSLength=1;
if(runningCon==false)
{
 if(currentSLength<10)
 {
 displayTimeLeft.innerHTML= "0"+currentSLength+":00"
 }
 else{
displayTimeLeft.innerHTML= currentSLength+":00";
}
}
}
if(id == 'session-increment')
{
currentSLength++;
currentSLength<=60? document.getElementById("session-length").innerHTML = currentSLength: currentSLength=60;
if(runningCon==false)
{
if(currentSLength<10)
 {
 displayTimeLeft.innerHTML= "0"+currentSLength+":00"
 }
 else{
displayTimeLeft.innerHTML= currentSLength+":00";
}

}
}
if(runningCon == false)
{
AtStart[0] = currentSLength;
AtStart[1] = currentBLength;
//alert("Session = "+AtStart[0]+". Session = "+AtStart[1]); 
} // this will start us out;
}
//START SESSION TIMER
function iterateTimer()
{
document.getElementById("timer-label").innerHTML="Session";
runningCon=true;

var displayArr = displayTimeLeft.innerHTML.split(":");
var totalTime = parseInt(displayArr[0])*60 + parseInt(displayArr[1]); // receives total number of seconds; we must only assign this once
var sec=totalTime%60;
var min=Math.floor(totalTime/60);
sec--;
if(sec==-1 && min!=0)
{
sec=59
}
if(sec==59)
{
min--;
}

//now lets render: formating display is to be noted!
if(min<10 && sec>=10)
{
displayTimeLeft.innerHTML = "0"+min+":"+sec ;
//alert("true")
}
else if(min>=10 && sec>=10)
{
displayTimeLeft.innerHTML = min+":"+sec;
}
else if(sec<10 && min>=10)
{
displayTimeLeft.innerHTML = min+":"+"0"+sec;
}
else if(sec>=10 && min>=10)
{
displayTimeLeft.innerHTML = min+":"+sec;
}
else if(min<10&&sec<10){displayTimeLeft.innerHTML = "0"+min+":"+"0"+sec;}
if(sec==-1&&min==0)
{
/*playBeep();
displayTimeLeft.innerHTML = "00:00";
document.getElementById("timer-label").innerHTML="Break";
displayTimeLeft.innerHTML=AtStart[1]+":00";
runBreak();*/
document.getElementById("timer-label").innerHTML="Break";
playBeep();
stopTimer();
displayTimeLeft.innerHTML = AtStart[1]+":00";
runTimer();
}
}
//RUN BREAK TIMER HERE!

function iterateBreak()
{
document.getElementById("timer-label").innerHTML="Break";
runningCon=true;
var displayArr = displayTimeLeft.innerHTML.split(":");
var totalTime = parseInt(displayArr[0])*60 + parseInt(displayArr[1]); // receives total number of seconds; we must only assign this once
var sec=totalTime%60;
var min=Math.floor(totalTime/60);
sec--;
if(sec==-1&&min!=0)
{
sec=59
}
if(sec==59)
{
min--;
}
//now lets render: formating display is to be noted!
if(min<10 && sec>=10)
{
displayTimeLeft.innerHTML = "0"+min+":"+sec ;
//alert("true")
}
else if(min>=10 && sec>=10)
{
displayTimeLeft.innerHTML = min+":"+sec;
}
else if(sec<10 && min>=10)
{
displayTimeLeft.innerHTML = min+":"+"0"+sec;
}
else if(sec>=10 && min>=10)
{
displayTimeLeft.innerHTML = min+":"+sec;
}
else if(min<10&&sec<10){displayTimeLeft.innerHTML = "0"+min+":"+"0"+sec;}

if(sec==-1&&min==0)
{
document.getElementById("timer-label").innerHTML="Session";
playBeep();
stopTimer();
displayTimeLeft.innerHTML = AtStart[0]+":00";
runTimer();
}
}


function runTimer()
{
if(document.getElementById("timer-label").innerHTML=="Break")
{
timer2= setInterval(iterateBreak,1000);
}
else
{
timer=setInterval(iterateTimer,1000);
}
}
function stopTimer()
{
clearInterval(timer);
clearInterval(timer2);
}
function theSwitch()
{
if(runningCon==true)
{
stopTimer()
runningCon=false;
}
else
{
runTimer()
runningCon=true;
}
}
//WORK ON THIS FUNCTION
function runBreak()
{
stopTimer();
//alert("Break Length = "+AtStart[1]);
timer2= setInterval(iterateBreak,1000);
}

function resetClock()
{
stopTimer();
AtStart[0]=25;
AtStart[1]=5;
displayTimeLeft.innerHTML = "25:00";
document.getElementById("break-length").innerHTML = 5;
document.getElementById("session-length").innerHTML =25;
runningCon = false;
document.getElementById("timer-label").innerHTML="Session";
currentSLength = 25;
currentBLength =5;
var A = document.getElementById("beep");
A.currentTime=0;
A.pause();
}
function playBeep()
{
var A = document.getElementById("beep");
beep.play();
}
</script>
</body>
</html>```

It says TypeError: “Cannot read property ‘1’ of null”
Why? I’m confused!

Hello and welcome to the freeCodeCamp community~!

Do you have a link to a live version, such as a CodePen? It is often easier to debug this when we have a live example to work with :slight_smile:

I’m kinda of new to this whole thing but I think this is the link: https://codepen.io/freeCodeCamp/pen/MJjpwO

My code is also in this post. I sort of struggled to render it from markdown to ordinary html initially. I think its all visible now.

So the link you provided is for the freeCodeCamp test suite pen. Your work isn’t being saved at this link.

To be able to save your work, you need to log in to CodePen with your account, then click the “fork” button in the bottom right of that screen. That’ll create a copy of the fCC pen with the test suite - write your code there, and it’ll save to your account with your own link. :slightly_smiling_face:

I think this is it now. Hopefully : https://codepen.io/ZiphoLunika/pen/VwaEdNz

Alright - I believe I see the source of your errors.

The test uses a regex to locate the time display. The regex specifically matches a format 00:00, and checks the values with [1] and [2] (the regex validation returns an array).

However, when your clock transitions from session to break (for example), instead of starting the time at 05:00 it starts at 5:00 - the regex doesn’t match this, so the tests see null instead of the time. Thus, the errors you receive.

1 Like

Ah yes,I see it now! I’ll try to fix that right away thank you.

1 Like

Good luck and happy coding! :smiley:

1 Like

Thanks for this! I’ve also been banging my head against the wall for the last 4 days trying to get this project to pass the tests. I’d been looking at the test suite code on GitHub, but didn’t spot this as my clock was only shifting to one digit on the very first second of the new countdown. So frustrating! So glad it works now!