We Keep Coding

javascript: my code is supposed to begin a countdown from 60 but the number values aren't appearing

My code is supposed to begin a countdown from 60 but the number values aren't appearing.
The timer begins but is only showing undefined/NaN.
Ive ran through the code a few times and haven't found the issue.
What did I do wrong? Thanks.
The remaining is just to take up room for the required amount of text/code ratio.
//If we click on the start/reset button
document.getElementById("startreset").onclick = function () {
//If we are playing
if (playing == true) {
location.reload(); //reload page
} else { //If we are not playing
//change mode to playing
playing = true;
//set score to 0
score = 0;
document.getElementById("scorevalue").innerHTML = score;
//show countdown box
show("timeremaining")
document.getElementById("timeremainingvalue").innerHTML = timeremaining;
//change button to reset
document.getElementById("startreset").innerHTML = " Reset";
//start countdown
startCountdown();
//generate new Q&A
generateQA();
}
};
//reload page
//reduce time by one second in loop
//time left?
//Yes->continue
//No->game over
//generate new Q&A
//If we click on answer box
//If we are playing
//correct?
//yes
//increase score by one
//show correct box
//generate new Q&A
//no
//show try again box
//functions
//start counter
function startCountdown() {
action = setInterval(function () {
timeremaining -= 1;
document.getElementById("timeremainingvalue").innerHTML = timeremaining;
if (timeremaining == 0) { //game over
clearInterval(action);
stopCountdown();
show("gameOver");
document.getElementById("gameOver").style.display = "block";
document.getElementById("gameOver").innerHTML = "<p>Game Over.</p><p>You scored: " + score + ".</p>";
hide("timeremaining");
hide("correct");
hide("wrong");
playing = false;
}
}, 1000);
}
//stop counter
function stopCountdown() {
clearInterval(action);
}
//hide an element
function hide(id) {
document.getElementById(id).style.display = "none";
}
//show an element
function show(id) {
document.getElementById(id).style.display = "block";
}
//generate Q and multiple A
function generateQA() {
}
/* no css */
<div id="container">
<div id="score">
score:
<span id="scorevalue">0</span>
</div>
<div id="correct">
correct
</div>
<div id="wrong">
try again
</div>
<div id="question">
</div>
<div id="instruction">
Click on the correct answer.
</div>
<div id="choices">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
</div>
<div id="startreset">
Start Game
</div>
<div id="timeremaining">
Time Remaining <span id="timeremainingvalue">60</span> sec
</div>
<div id="gameOver">
</div>
</div>

I have updated your code to use some global window variables to pass data around. Here is a fiddlewith your updated code.Here is the updated html and javascript:
//If we click on the start/reset button
window.timerIsPlaying = false;
window.timeRemaining = 60;
document.getElementById('startreset').onclick = function() {
//If we are playing
if (window.timerIsPlaying == true) {
location.reload(); //reload page
} else {
//If we are not playing
//change mode to playing
window.timerIsPlaying = true;
//set score to 0
score = 0;
document.getElementById('scorevalue').innerHTML = score;
//show countdown box
show('timeremaining');
document.getElementById('timeremainingvalue').innerText = window.timeRemaining;
//change button to reset
document.getElementById('startreset').innerHTML = ' Reset';
//start countdown
startCountdown();
//generate new Q&A
generateQA();
}
};
//reload page
//reduce time by one second in loop
//time left?
//Yes->continue
//No->game over
//generate new Q&A
//If we click on answer box
//If we are playing
//correct?
//yes
//increase score by one
//show correct box
//generate new Q&A
//no
//show try again box
//functions
//start counter
function startCountdown() {
action = setInterval(function() {
window.timeRemaining -= 1;
document.getElementById('timeremainingvalue').innerHTML = window.timeRemaining;
if (timeremaining == 0) {
//game over
clearInterval(action);
stopCountdown();
show('gameOver');
document.getElementById('gameOver').style.display = 'block';
document.getElementById('gameOver').innerHTML = '<p>Game Over.</p><p>You scored: ' + score + '.</p>';
hide('timeremaining');
hide('correct');
hide('wrong');
playing = false;
}
}, 1000);
}
//stop counter
function stopCountdown() {
clearInterval(action);
}
//hide an element
function hide(id) {
document.getElementById(id).style.display = 'none';
}
//show an element
function show(id) {
document.getElementById(id).style.display = 'block';
}
//generate Q and multiple A
function generateQA() {}
<div id="container">
<div id="score">
score:
<span id="scorevalue">0</span>
</div>
<div id="correct">
correct
</div>
<div id="wrong">
try again
</div>
<div id="question"></div>
<div id="instruction">
Click on the correct answer.
</div>
<div id="choices">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
</div>
<div id="startreset">
Start Game
</div>
<div id="timeremaining">
Time Remaining <span id="timeremainingvalue">60</span> sec
</div>
<div id="gameOver"></div>
</div>
It looks like in code provided and I believe this is what Phillip was referring to in his comment , was the timeremaining remaining variable not being accessible. I put it on the window object and and updating it there now. I hope this help.

After 2 images slided in right side, next page is blank

I want to build a slider with buttons and I can`t figure out how should I do it.
When I hit the right button it slides 2 pages then show a blank, and thinking the problem is on the arrowRight function.
If anyone knows why my code isn't working please explain to me.
//FOR SLIDER
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
function startSlide() {
reset();
sliderImages[0].style.display = 'block';
}
startSlide();
function slideLeft() {
reset();
sliderImages[current - 1].style.display = 'block';
current--
}
arrowLeft.addEventListener('click', function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
})
function slideRight() {
reset();
sliderImages[current + 1].style.display = 'block';
current++
}
arrowRight.addEventListener('click', function () {
if (current === sliderImages.length) {
current = 0;
}
slideRight();
})

I don't think your method is perfect for that task. Usually it's two containers - one for visible part, other is full of images. It'll look something like this:
const sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
container = document.querySelector(".container");
document.addEventListener("DOMContentLoaded", function() {
container.style.width = 100 * sliderImages.length + "%";
sliderImages.forEach((el) => {
el.style.width = 100 / sliderImages.length + "%";
})
startSlider()
});
function startSlider() {
let pos = 0;
arrowLeft.addEventListener("click", slideLeft)
arrowRight.addEventListener("click", slideRight)
function slideLeft() {
if(pos === 0) {
pos = sliderImages.length - 1;
} else{
pos--;
}
slide()
}
function slideRight() {
if(pos === sliderImages.length - 1) {
pos = 0;
} else {
pos++;
}
slide()
}
function slide() {
$(container).animate({left: -100 * pos + "%"}, 500)
}
}
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
}
.outer-container {
width: 80%;
margin: 5px auto;
overflow: hidden;
position: relative;
}
.slide > img {
width: 100%;
}
.container {
display: flex;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-container">
<div id="arrow-left">LEFT</div>
<div id="arrow-right">RIGHT</div>
<div class="container">
<div class="slide">
<img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg">
</div>
<div class="slide">
<img src="https://media.boingboing.net/wp-content/uploads/2019/02/cats.jpg">
</div>
<div class="slide">
<img src="https://cdn-images-1.medium.com/max/1600/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div>
</div>
If you just a fix for your code, here's what I've changed:
arrowRight.addEventListener('click', function () {
//Make sure that's current less than the number of images
if (current + 1 == sliderImages.length) {
current = 0;
} else {
current++;
}
slide();
})
//Moved checks and current position management from slide
//Functions to click listeners
arrowLeft.addEventListener('click', function () {
if (current === 0) {
current = sliderImages.length - 1;
} else {
current--;
}
slide();
})
//That let me merge your two function into one
//And your checks for positions was a little off
function slide(){
reset();
sliderImages[current].style.display = 'block';
}
I hope my answer helped you. If you have any questions about this code add a comment below.

Javascript run 2 functions on button click with multiple buttons and same class

I have a portfolio grid that has a screenshot of past work in each grid item.
Currently on button click, it calls a function to scroll the screenshot and stop once it reaches the bottom of the image.
I need to reverse the scroll once the button is clicked again. The scroll is created by a setInterval. I have a class of "down" on the button which is removed on click.
I have an if statement that does not work to check if the class of "down" is present and run a scrollUp function.
This is a PHP loop so there are multiple buttons with same class.
I cannot use jQuery.
Thanks for any help!
HTML:
<ul>
<li>
<div class="image-container overflow-hidden height-500">
<img class="item absolute pin-t w-full h-auto pin-l"
src="/image.jpg"/>
</div>
<button class="portScroll down">Scroll Down</button>
</li>
<li class="web-design-portfolio">
<div class="image-container overflow-hidden height-500">
<img class="item absolute pin-t w-full h-auto pin-l"
src="/image.jpg"/>
</div>
<button class="portScroll down">Scroll Down</button>
</li>
</ul>
JS:
function scrollDown() {
var portImg = this.parentNode.parentNode.querySelector('img.item');
var height = portImg.clientHeight;
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == height - 500) {
clearInterval(id);
} else {
pos++;
portImg.style.top = - + pos + 'px';
}
}
for (const button of document.querySelectorAll('button.portScroll')) {
button.classList.remove('down');
}
}
for (const button of document.querySelectorAll('button.portScroll')) {
if (button.classList.contains("down")) {
button.addEventListener("click", scrollDown);
} else {
button.addEventListener("click", scrollUp);
}
}
Here is the working Codepen for scroll down:
https://codepen.io/completewebco/pen/bZeVoz

I created a single function that does what is needed. I hope that is OK.
function scrollUpOrDown(_this, state) {
var portImg = _this.parentNode.parentNode.querySelector('img.item');
var height = portImg.clientHeight;
if(state.id > -1) {
clearInterval(state.id);
state.dir *= -1;
}
if(state.pos < 0) {
state.pos = 1;
}
state.id = setInterval(frame, 5);
function frame() {
if ((state.pos == height - 500 && state.dir > 0) || (state.pos == 0 && state.dir < 0)) {
clearInterval(state.id);
} else {
state.pos += state.dir;
portImg.style.top = -+state.pos + "px";
}
}
}
for (const button of document.querySelectorAll("button.portScroll")) {
let scollingState = {
pos: -1,
id: -1,
dir: 1
};
if (button.classList.contains("down")) {
button.addEventListener("click", function(){
scrollUpOrDown(this,scollingState);
});
}
}
https://codepen.io/prtjohanson/pen/QoEyQK
If you are wondering why/how it works, look at the output of this code
var array = [0,1,2,3,4,5];
for(const i in array) {
setTimeout(function(){console.log(i)}, Math.random()*1000)
}
and read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Scoping_rules_2

how to get slide indicator to match current slide?

I have made this vanilla js image slider with three images. In the html i have three indicator dots at the bottom of the slider and a css active class for the active indicator. Can't figure out how to get the class to add to the current slide of the slide show, any help?
let sliderImages = document.querySelectorAll('.slides'),
prevArrow = document.querySelector('#prevBtn'),
nextArrow = document.querySelector('#nextBtn'),
dots = document.querySelectorAll('.indicator__dot'),
current = 0;
reset = () => {
for(let i = 0; i <sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
startSlide = () => {
reset();
sliderImages[0].style.display = 'block'
}
prevSlide = () => {
reset();
sliderImages[current - 1].style.display = 'block';
current -- ;
}
nextSlide = () => {
reset();
sliderImages[current + 1].style.display = 'block';
current++;
}
prevArrow.addEventListener('click', () => {
if(current === 0 ) {
current = sliderImages.length;
}
prevSlide();
});
nextArrow.addEventListener('click', () => {
if(current === sliderImages.length - 1 ) {
current = -1
}
nextSlide();
});
startSlide()

No sorry I should have been more clear and included some html. I have 3 dots at the bottom of the slider. When slide one is the current image the first dot will have the css class added to it, when the second image is showing the second do will have the active class and the first dot wont any more. Hope that makes more sense?
<div class="indicator">
<span class="indicator__dot">&nbsp</span>
<span class="indicator__dot">&nbsp</span>
<span class="indicator__dot">&nbsp</span>
</div>

Haven't tested this so may have some bugs. setAnchor() function resets all the dots and add active class to the current dot.
setAnchor = () => {
for(let i = 0; i <dots.length; i++) {
sliderImages[i].classList.remove("active");
if(current === i){
sliderImages[i].classList.add("active");
}
}
}
startSlide = () => {
reset();
sliderImages[current].style.display = 'block'
setAnchor();
}
prevSlide = () => {
reset();
current -- ;
sliderImages[current].style.display = 'block';
setAnchor();
}
nextSlide = () => {
reset();
current++;
sliderImages[current].style.display = 'block';
setAnchor();
}

Add class when X class is been removed via JS

I am trying to add a class to a div when another class is been removed with JS.
This is my HTML:
<body class="homepage">
<div id="wrap">
<div id="projects">
<section id="project-0" class="slide active"> Slide 1</section>
<section id="project-1" class="slide active"> Slide 2</section>
<section id="project-2" class="slide active"> Slide 3</section>
</div>
</div>
<div class="content"> Website main content </div>
This is a vertical slide, so when you scroll down, the active class is removed with JS. What I want to achieve is to add a class to body when the active is removed from project-2.
This is what I have so far, but it doesn't recognise the class active because it's been added via JS...
if(!$("#project-2").hasClass("active")){
$("body").addClass("shifted");
}
JS:
var delta = 0;
var currentSlideIndex = 0;
var scrollThreshold = 30;
var slides = $(".slide");
var numSlides = slides.length;
function elementScroll (e) {
console.log (Math.abs(delta));
// --- Scrolling up ---
if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {
delta--;
if ( Math.abs(delta) >= scrollThreshold) {
prevSlide();
}
}
// --- Scrolling down ---
else {
delta++;
if (delta >= scrollThreshold) {
nextSlide();
}
}
// Prevent page from scrolling
return false;
}
function showSlide() {
// reset
delta = 0;
slides.each(function(i, slide) {
$(slide).toggleClass('active', (i >= currentSlideIndex));
});
}
function prevSlide() {
currentSlideIndex--;
if (currentSlideIndex < 0) {
currentSlideIndex = 0;
}
showSlide();
}
function nextSlide() {
currentSlideIndex++;
if (currentSlideIndex > numSlides) {
currentSlideIndex = numSlides;
}
showSlide();
}
$(window).on({
'DOMMouseScroll mousewheel': elementScroll
});
You can see here how it works
Thanks

By looking at your JS code I believe you want to add class to body while scrolling down. You may try below code:
function prevSlide() {
currentSlideIndex--;
if(currentSlideIndex == (numSlides-1))
{
$("body").removeClass("shifted"); // remove the class from body
}
if (currentSlideIndex < 0) {
currentSlideIndex = 0;
}
showSlide();
}
function nextSlide() {
currentSlideIndex++;
if (currentSlideIndex > numSlides) {
currentSlideIndex = numSlides;
$("body").addClass("shifted"); // add the class to body
}
showSlide();
}

Your check for the absence of the class is only started once. You had to do this with an interval from 100 ms or whatever you want:
setInterval(function()
{
if (!$("#project-2").hasClass("active")){
$("body").addClass("shifted");
}
}, 100);