Develop Reference

How to disable function based on condistion - JS

Hope someone can help. I'm new to JS and need some help.
I have the following code:
}
function onBall3Click() {
var ball3 = document.querySelector('.ball3');
alert('Ball3');
if (ball3.innerText == 'OFF') {
ball3.style.backgroundColor = 'yellow';
ball3.innerText = 'ON';
} else if (ball3.innerText == 'ON') {
ball3.style.backgroundColor = 'gray';
ball3.innerText = 'OFF';
}
}
function onBall4Click() {
var ball4 = document.querySelector('.ball4');
alert('Ball4');
var size = prompt("What should be the size of the ball?");
if (size > 1000) {
alert('Too Big!')
} else {
ball4.style.width = size;
ball4.style.height = size;
}
what I need to know is how to disable function onBall4click when the Ball3.innerText = 'OFF'
and how to enable the function once the Ball3.innerText = 'ON'
Appreciate all the support.

I am not an expert in Javascript but I think all you need to do is add a guard clause in the onBall4click function and check if Ball3 is ON before doing anything. The modified function would look something like this:
function onBall4Click() {
var ball3 = document.querySelector(".ball3");
if(ball3.innerText === "OFF") return;
var ball4 = document.querySelector('.ball4');
alert('Ball4');
var size = prompt("What should be the size of the ball?");
if (size > 1000) {
alert('Too Big!')
} else {
ball4.style.width = size;
ball4.style.height = size;
}
}
When you click on Ball 4, the function checks Ball3 and stops executing if it is off.

Click on multiple buttons to progress to next page

need some help. When I click the yellow tape on the page it disappears (granting access up the stairs. However I'm struggling to program it so that when all three are clicked, it progresses to the next page. Any help appreciated.
var counter = 0;
function del1()
if (counter == 0) {
{
document.getElementById("img3").style.display = 'none';
counter++;
}
}
function del2()
if (counter == 1) {
{
document.getElementById("img4").style.display = 'none';
counter++;
}
}
function del3()
if (counter == 2) {
{
document.getElementById("img5").style.display = 'none';
counter++;
}
}
function win()
if (counter === 3) {
clearInterval(timer);
sessionStorage.setItem('timerem', rem);
window.open('page2.html', "_self");
}

You are better off using delegation
Wrap the tape images in a div with id = stairs and give each of them a class of tape
Let me know if you must cut them in order
const tapes = 3;
document.getElementById("stairs").addEventListener("click", function(e) {
const tgt = e.target; // whatever clicked in the div
if (tgt.className.contains("tape")) { // we clicked a tape
tgt.className.add("hide"); // hide it
const allSnipped = tgt.closest("div").querySelectorAll(".tape.hide").length === tapes; // count .hide's
if (allSnipped) {
clearInterval(timer);
sessionStorage.setItem('timerem', rem);
location = 'page2.html';
}
}
})
.hide {
display: none;
}
Your code fixed
var counter = 0;
function del1() {
if (counter == 0) {
document.getElementById("img3").style.display = 'none';
counter++;
}
}
function del2() {
if (counter == 1) {
document.getElementById("img4").style.display = 'none';
counter++;
}
}
function del3() {
if (counter == 2) {
document.getElementById("img5").style.display = 'none';
win();
}
}
function win() {
clearInterval(timer);
sessionStorage.setItem('timerem', rem);
location = 'page2.html';
}

Back/Forward button between 3 images

I am trying to make a function that can go forward and backwards between 3 images, depending on which button is pressed.
So for now I have made a function for forward and backwards button:
Updated code:
var img1 = "images2/page1.jpg";
var img2 = "images2/page2.jpg";
var img3 = "images2/page3.jpg";
function back() {
var page = document.getElementById("page_1");
if (page.src == img3) {
page.src = img2;
} else if (page.src == img2) {
page.src = img1;
} return page.src;
}
function forward() {
var page = document.getElementById("page_1");
if (page.src == img1) {
page.src = img2;
} else if (page.src == img2) {
page.src = img3;
} return page;
}
But when I run it in my HTML document, the buttons do nothing.
HTML:
<script src="indiv.js"></script>
<img id="page_1" src="images2/page1.jpg" height="400"><br />
<button type="button" onclick="back()">Last page</button>
<button type="button" onclick="forward()">Next page</button>
What am I missing?
Thank you from the newbie.

Check this code:
var img1 = "https://www.illumina.com/content/dam/illumina-marketing/images/company/featured-articles/bottlenose_dolphin.png"
var img2 = "https://i.pinimg.com/564x/65/d6/cf/65d6cfcb2bb5193d6d160157b34b2bd0.jpg"
var img3 = "https://i.pinimg.com/originals/d6/98/88/d698888c81f296032bd595f758b76dc5.jpg"
function back() {
var page = document.getElementById("page_1");
if (page.src == img3) {
page.src = img2;
} else if (page.src == img2) {
page.src = img1;
} else if (page.src == img1) {
page.src = img3;
}
}
function forward() {
var page = document.getElementById("page_1");
if (page.src == img1) {
page.src = img2;
}else if (page.src == img2) {
page.src = img3;
}else if (page.src == img3) {
page.src = img1;
}
}
<img id = "page_1" src = "https://www.illumina.com/content/dam/illumina-marketing/images/company/featured-articles/bottlenose_dolphin.png" height = "200"><br>
<button type="button" onclick="back()">Last Page</button>
<button type="button" onclick="forward()">Next page</button>

The cleanest way to do this is to maintain an array of images you want to cycle through. Then have a index variable to keep track of which image to show currently. Forward and backward buttons just increase or decrease the index variable by one.
<div>
<img id="page_1" src="" height="400">
<button type="button" onclick="back()">Last page</button>
<button type="button" onclick="forward()">Next page</button>
</div>
<script>
//array of images
let map = ["https://www.hindustantimes.com/rf/image_size_444x250/HT/p2/2020/05/21/Pictures/_037138a2-9b47-11ea-a010-c71373fc244b.jpg",
"https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
"https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg"
]
//index variable initially set to first image
let index = 0;
document.getElementById("page_1").src = map[index];
//forward button logic
function forward() {
index = (index + 1) % 3;
document.getElementById("page_1").src = map[index];
}
//backward button logic
function back() {
index = (index - 1 < 0) ? 2 : index - 1;
document.getElementById("page_1").src = map[index];
}
</script>
Codepen

jQuery Hide/Show Within If/Else Statement Not Working

I'm working on a quick jQuery slideshow and I'm having some issues. I have a variable that increases or decreases when you press the navigation buttons, and the code is supposed to show or hide the images based on the number. It doesn't appear to work however, only showing img1 and not displaying any of the other images. I have verified that the currentImage variable is changing properly. Please let me know what I'm doing wrong.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var currentImage = 0;
$("#next").click(function(){
currentImage++;
if(currentImage > 2)
{
currentImage = 0;
}
});
$("#previous").click(function(){
currentImage--;
if(currentImage < 0)
{
currentImage = 2;
}
});
if(currentImage == 0)
{
$(".img1").show();
}
else
{
$(".img1").hide();
}
if(currentImage == 1)
{
$(".img2").show();
}
else
{
$(".img2").hide();
}
if(currentImage == 2)
{
$(".img3").show();
}
else
{
$(".img3").hide();
}
});
</script>

You only run the If/Then/Else statements once, on document load, you need to rerun them after the click events:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var currentImage = 0;
$("#next").click(function(){
currentImage++;
if(currentImage > 2)
{
currentImage = 0;
}
refreshImg();
});
$("#previous").click(function(){
currentImage--;
if(currentImage < 0)
{
currentImage = 2;
}
refreshImg();
});
function refreshImg(){
if(currentImage == 0)
{
$(".img1").show();
}
else
{
$(".img1").hide();
}
if(currentImage == 1)
{
$(".img2").show();
}
else
{
$(".img2").hide();
}
if(currentImage == 2)
{
$(".img3").show();
}
else
{
$(".img3").hide();
}
}
});
</script>

The code showing or hiding the images should be executed when the button is clicked. At the moment it is only hiding or showing the button on document ready.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var currentImage = 0;
$("#next").click(function(){
currentImage++;
if(currentImage > 2)
{
currentImage = 0;
}
ShowOrHideImage();
});
$("#previous").click(function(){
currentImage--;
if(currentImage < 0)
{
currentImage = 2;
}
ShowOrHideImage();
});
function ShowOrHideImage() {
if(currentImage == 0)
{
$(".img1").show();
}
else
{
$(".img1").hide();
}
if(currentImage == 1)
{
$(".img2").show();
}
else
{
$(".img2").hide();
}
if(currentImage == 2)
{
$(".img3").show();
}
else
{
$(".img3").hide();
}
}
});
</script>

Your conditional statements are running as soon as the document is ready, at that time the value of currentImage is 0. You can stick it into a function and call it every time there's a click
var toggleImages = function(current) {
if(current== 0)
{
$(".img1").show();
}
else
{
$(".img1").hide();
}
if(current== 1)
{
$(".img2").show();
}
else
{
$(".img2").hide();
}
if(current== 2)
{
$(".img3").show();
}
else
{
$(".img3").hide();
}
};
$(document).ready(function(){
var currentImage = 0;
$("#next").click(function(){
currentImage++;
if(currentImage > 2)
{
currentImage = 0;
}
toggleImages(currentImage);
});
$("#previous").click(function(){
currentImage--;
if(currentImage < 0)
{
currentImage = 2;
}
toggleImages(currentImage);
});
});

your code should be:
$(document).ready(function(){
currentImage = 0;
updateImgae(currentImage);
$("#next").click(function(){
currentImage++;
if(currentImage > 2)
{
currentImage = 0;
}
updateImgae(currentImage);
});
$("#previous").click(function(){
currentImage--;
if(currentImage < 0)
{
currentImage = 2;
}
updateImgae(currentImage);
});
function updateImgae(currentImage){
if(currentImage == 0)
{
$(".img1").show();
}
else
{
$(".img1").hide();
}
if(currentImage == 1)
{
$(".img2").show();
}
else
{
$(".img2").hide();
}
if(currentImage == 2)
{
$(".img3").show();
}
else
{
$(".img3").hide();
}
}
});

a much simpler version - get the source of the image, increment it or decrement it and replace the image with the new source. requires the images to be named 1.jpg, 2.jpg and 3.jpg etc (and placed within the correct folder - I have used images/slideshow/1.jpg etc).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<button type="button" value = "-1">Previous Image</button>
<img id="slideshowImage" src="images/slideshow/1.jpg" alt="Image 1" height="100" width="100"/>
<button type="button" value = "+1">Next Image</button>
<script>
$(":button").click(function() {
var imageSrc=$('#slideshowImage').attr('src').split('/');
var count = parseFloat(imageSrc[2]);
var newSrc = count+parseFloat(($(this).val()))
if(newSrc>3){newSrc=1}else{if(newSrc==0){newSrc=3}};
$('#slideshowImage').attr('src','images/slideshow/'+newSrc+'.jpg').attr('alt','Image '+newSrc)
});
</script>
</body>
</html>
Essentially on the click of either button, a function is called that determines the image source, splits it to get the specific image number, increments or decrements that number based on the button pressed, and sets the new image srouce and alt attributes to the new count. The benefit of this approach apart from the small amount of code, is that it is easy to scale and add more pictures to the slideshow in the future. Hope this helps, gavgrif

Calling function from div and link not working

I have the code below. It works on a mobile device but for some reason, that baffles me, it won't work in a desktop browser. Any ideas?
<div class="top_nav_option_wrapper"
onclick="javascript:changePage('{{ shop.url }}{{ link.url }}','fade');">
<a href="#"
onclick="javascript:changePage('{{ shop.url }}{{ link.url }}','fade');"
class="top_nav_option">{{ link.title }}</a><br>
</div>
Function
// Function used to transition a page out and navigate to a new page
function changePage(goToUrl, type, id) {
alert('HEY');
if (type == 'collection_flicker') {
prodElements = ['prod1', 'prod2', 'prod3', 'prod4'];
for (i = 0; i < prodElements.length; i++) {
if (document.getElementById(prodElements[i]) != null && document.getElementById(prodElements[i]) != document.getElementById(id)) {
document.getElementById(prodElements[i]).style.opacity = "0";
document.getElementById(prodElements[i]).style.display = "none";
}
}
flickerEffect('collection_exit', 15, 50);
window.setTimeout(function () {
window.location.href = goToUrl
}, 1000);
} else if (type == 'fade' && currentTemplate == 'collection') {
document.getElementById('watermark').style.transition = '1s opacity';
document.getElementById('watermark').style.opacity = '0';
document.getElementById('productCollectionList').style.transition = '1s opacity';
document.getElementById('productCollectionList').style.opacity = '0';
window.setTimeout(function () {
window.location.href = goToUrl
}, 500);
} else {
window.location.href = goToUrl;
}
}

I suggest the following changes - I am not sure how link.url becomes a type but you will see the idea
HTML:
<div class="top_nav_option_wrapper">
<a href="{{ shop.url }}"
onclick="return changePage(this.href,'{{ link.url }}','fade');"
class="top_nav_option">{{ link.title }}</a><br>
</div>
Script
// Function used to transition a page out and navigate to a new page
function changePage(goToUrl, type, id) {
if (type == 'collection_flicker') {
prodElements = ['prod1', 'prod2', 'prod3', 'prod4'];
for (var i = 0; i < prodElements.length; i++) {
var prodelem = document.getElementById(prodElements[i]);
if (prodelem != null && prodelem != document.getElementById(id)) {
prodelem.style.opacity = "0";
prodelem.style.display = "none";
}
}
flickerEffect('collection_exit', 15, 50);
window.setTimeout(function () {
window.location.href = goToUrl
}, 1000);
return false; // cancel link
} else if (type == 'fade' && currentTemplate == 'collection') {
document.getElementById('watermark').style.transition = '1s opacity';
document.getElementById('watermark').style.opacity = '0';
document.getElementById('productCollectionList').style.transition = '1s opacity';
document.getElementById('productCollectionList').style.opacity = '0';
window.setTimeout(function () {
window.location.href = goToUrl
}, 500);
return false; // cancel link
}
return true; // allow link
}