We Keep Coding

javascript I have a sequence that runs continuously, but need it to stop when an image is clicked

I have very little to no knowledge when it comes to using JavaScript. I have 24 of the same image given an id from q1 - q24. my code allows for the 24 images to be changed to image2 one at a time, but I need for it to stop and display a text/alert when image2 is clicked.
<script>
{
let num = 1;
function sequence()
{
let back = 1;
while (back < 25)
{
if(back == 1)
{
document.getElementById("q24").src = "question.jpg";
}
else
{
document.getElementById("q" + (back-1)).src = "question.jpg";
}
back++
}
document.getElementById("q" + num).src = "question2.png";
num = num + 1;
if(num > 24){num = 1;}
}
setInterval(sequence, 500);
}
</script>

Save the interval timer to a variable. Then add a click listener to all the images that stops the timer if the current image is the one showing question2.jpg.
{
let num = 1;
for (let i = 1; i <= 24; i++) {
document.getElementById(`q${i}`).addEventListener("click", function() {
if (i == num) {
clearInterval(interval);
}
});
}
let interval = setInterval(sequence, 500);
function sequence() {
for (let i = 1; i <= 24; i++) {
if (i == num) {
document.getElementById(`q${i}`).src = "question2.jpg";
} else {
document.getElementById(`q${i}`).src = "question.jpg";
}
num = num + 1;
if (num > 24) {
num = 1;
}
}
}
}

While I don't fully understand your use case, you could create a click event listener on the document and check the target's src in it.
document.addEventListener('click', function(e) {
if (e.target.src === 'question2.png') {
alert('Clicked question 2');
}
});

add multiple numbers to count jquery

this is the dead script for my shooter game (the buttons are just for testing)
but for some reason i cant figure out how to add 10 instead of 1
this is what i have now:
(function(){
const buttons = document.querySelectorAll('.counterBtn')
let count= 0
//Add event listeners and functionailty to each button
buttons.forEach(function(button){
button.addEventListener('click', function(){
//buttons
if (button.classList.contains('-1')){
count--
} else if (button.classList.contains('+1')){
count++
} else if (button.classList.contains('+10')){
}
//Select the counter text
const counter = document.querySelector('#counter')
counter.textContent = count
//dead / alive
if (count <= 0 ){
counter.style.color = 'red'
console.log("dead")
} else if (count > 0){
counter.style.color = 'lightgreen'
console.log("alive")
} else {
counter.style.color = '#000000'
}
if (count <= 0) {
alert ("you died")
} else if (count > 100 ) {
alert ("u r ful health")
} else {
return
}
})
})
})()
can someone please help me?

Use +=, for example:
count += 10
Of course this also works, but is more verbose:
count = count + 10
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment

Enable scroll within a function

When I use scrollWheel I'm incremeting the currentSlide by one, when currentSlide === 2 the red div is going up and I want to enable the scrolling to the body. As you see my bind function is returning false. I tried to put conditions on that and return true when currentSlide === 2 but apparently it won't work.
Can anybody explain to me how to fix that?
var currentSlide = 0;
function scrollDown() {
console.log('Scroll Down', currentSlide);
if(currentSlide < 3) {
currentSlide += 1;
}
if(currentSlide === 3) {
$('#el').addClass('hide');
}
}
http://jsbin.com/rovicawija/1/edit?js,console,output

Technically you are hiding the element when currentSlide is equal to 3 not 2.
Anyways instead of return false; in the bindings you will want to do return currentSlide >= 3; so that when the red div is hidden you can now scroll.
Also as someone else noted use on instead of bind because bind has been deprecated.

I'm totally not sure what you are trying to do as your question and expected result is quite unclear
I made the code as following
var currentSlide = 0;
function scrollDown() {
console.log('Scroll Down', currentSlide);
if(currentSlide < 10) {
currentSlide += 1;
return false;
}
if(currentSlide === 10) {
$('#el').addClass('hide');
}
}
$(window).on('DOMMouseScroll', function(e) {
if (e.originalEvent.detail > 0) {
return scrollDown();
}
})
.on('mousewheel', function(e) {
if (e.originalEvent.wheelDelta < 0) {
return scrollDown();
}
});
By using on(which you should) and having the scrollDown returning a boolean false if not good to go, and return nothing if there's nothing to do.

I just put return true on the last function and everything seemed to work fine, see here:
$(window).bind('DOMMouseScroll', function(e) {
if (e.originalEvent.detail > 0) {
scrollDown();
}
return false;
})
.bind('mousewheel', function(e) {
if (e.originalEvent.wheelDelta < 0) {
scrollDown();
}
return true;
});

infinite slider logic with back and forth button

http://jsfiddle.net/xgpqe4rv/
var i = 1;
$('#right').click(function(){
$('img').attr('src',arr[i]['logo']);
i++
});
so far I can only do until here, there are still 2 missing requirements. I want the infinite loop, means it goes back to the 1 when it clicked the 4th item. The other one is the back button.

Here a simple solution for your problem: http://jsfiddle.net/xgpqe4rv/1/. Just put an if statement in to track where you are and reset i when i==3;
$('img').attr('src',arr[0]['logo']);
var i = 1;
$('#right').click(function(){
$('img').attr('src',arr[i]['logo']);
if(i == 3) {
i=0;
}
else {
i++;
}
});
});

Demo
Try this
var i = 1;
$('#right').click(function(){
if(!$(this).hasClass("active"))
{
i=i+1;
$("#left").removeClass("active");
}
if(i == 4)
{
i=0;
}
$('img').attr('src',arr[i]['logo']);
i++;
$(this).addClass("active");
});
$('#left').click(function(){
if(!$(this).hasClass("active"))
{
i=i-1;
$("#right").removeClass("active");
}
if(i == 0)
{
i=4;
}
$('img').attr('src',arr[i-1]['logo']);
i--;
$(this).addClass("active");
});

How can i clearInterval(myFunc) after myFunc has executed 5 times?

The purpose of the code below is to alert online shoppers that they must select a color (via a select/option menu) before putting an item into their basket. If they don't select a color (ie, make a selection) some blinking text displays alerting them.
I'm trying to have the text blink 3 times then stop. I tried using some counter vars but didn't work. How can I re-write this so the blink executes 3 times only?
function blink() {
if ($('.pleaseSelect').css('visibility') == 'hidden') {
$('.pleaseSelect').css('visibility', 'visible');
} else {
$('.pleaseSelect').css('visibility', 'hidden')
}
}
function showNotice() {
timerId = setInterval(blink, 200);
}
$('#addToCart').click(function() {
if ($("select > option:first").is(":selected")) {
showNotice();
} else {
clearInterval(showNotice);
$('.pleaseSelect').css('visibility', 'hidden');
}
})

Well you can have counter declared and incremented each time blink is called. then check if you have called blink three times, clear the interval. Also your showNotice function is not defined properly.
var counter = 0,
timerId;
function blink() {
if ($('.pleaseSelect').css('visibility') == 'hidden') {
$('.pleaseSelect').css('visibility', 'visible');
} else {
$('.pleaseSelect').css('visibility', 'hidden')
if (counter > 4) {
showNotice(false);
}
}
counter++;
}
function showNotice(show) {
if (show) {
timerId = setInterval(blink, 200);
} else {
clearInterval(timerId);
counter = 0;
}
}
$('#addToCart').click(function () {
if ($("select > option:first").is(":selected")) {
showNotice(true);
} else {
showNotice(false);
$('.pleaseSelect').css('visibility', 'hidden');
}
})
Here is working fiddle

function blink(){
var blinkCount = 0;
return function () {
if($('.pleaseSelect').css('visibility')== 'hidden'){
$('.pleaseSelect').css('visibility', 'visible');
} else {
$('.pleaseSelect').css('visibility', 'hidden')
}
blinkCount = blinkCount + 1;
if (blinkCount === 3) {
clearInterval(timerId);
}
}
}
the only thing is that timeId is global - bad practice... however you would have to refactor more of your code in order to correct that issue.

another option is to just fadIn and fadeOut rather than what you're doing.
It would look something like:
if(element.val() == ''){
element.fadeOut("fast");
element.fadeIn("fast");
element.fadeOut("fast");
element.fadeIn("fast");
element.fadeOut("fast");
element.fadeIn("fast");
}

How about this example? Use an anonymous function to call your blink method and keep decrementing a counter.
id = setInterval(function () {
counter--;
if (!counter) {
clearInterval(id);
}
blink();
}, 200);
See the JSFiddle for the complete context.

You can accomplish the desired behavior using variables within a private scope:
$('#addToCart').click(function(e) {
blink(e);
});
function blink(e) {
var blink_count = 0;
var timer = setInterval(function(e) {
blink_count++;
$('.pleaseSelect').toggle();
if (blink_count >= 6) {
clearInterval(timer);
blink_count = 0;
}
}, 200);
}