I am looking to update the 'startbutton.href' value based on the dynamic change in 'img.src'. Unfortunately, the if-else statement has proven ineffective in achieving this

Question

I am looking to update the 'startbutton.href' value based on the dynamic change in 'img.src'. Unfortunately, the if-else statement has proven ineffective in achieving this

let index = 1;
let images = [
    './img/wok.jpg',
    './img/croissant.jpg',
    './img/salad.jpg'
];

let img = document.getElementById("section-1-img");
let startButton = document.getElementById('startButton');

setInterval(function() {
    img.src = images[index];
    index = (index +1) % images.length;
    
    if (img.src === './img/wok.jpg') {
        startButton.href = 'recipe.html';
    else if (img.src === './img/croissant.jpg') { 
        startButton.href = 'recipe-2.html';
    else if (img.src === './img/salad.jpg') { 
        startButton.href = 'recipe-3.html';
} 2000);

I wish for the button's destination to change dynamically based on the image being displayed. So when I click on the button, it should direct me to the corresponding HTML page.

javascript

Answer 1

Answer №1

Your conditional statements are missing closing brackets, but here is a corrected version:

if (img.src === './img/wok.jpg') {
    startButton.href = 'recipe.html';
}
else if (img.src === './img/croissant.jpg') { 
    startButton.href = 'recipe-2.html';  
}
else if (img.src === './img/salad.jpg') { 
    startButton.href = 'recipe-3.html'; 
}

Answer 2

Your conditional statements are missing closing brackets, but here is a corrected version:

if (img.src === './img/wok.jpg') {
    startButton.href = 'recipe.html';
}
else if (img.src === './img/croissant.jpg') { 
    startButton.href = 'recipe-2.html';  
}
else if (img.src === './img/salad.jpg') { 
    startButton.href = 'recipe-3.html'; 
}

Answer 3

Answer №2

One effective approach is to create an array that holds objects, each containing the image and its corresponding href link. By doing this, you can avoid using if-else conditions and keep your data organized in one central location.

It's important to note that arrays start at index 0, not 1.

let index = 0; // starting at 0

// Array containing image data with respective href links
const data = [
  { img: './img/wok.jpg', href: 'recipe.html' },
  { img: './img/croissant.jpg', href: 'recipe-2.html' },
  { img: './img/salad.jpg', href: 'recipe-3.html' },
];

const img = document.getElementById("section-1-img");
const startButton = document.getElementById('startButton');

setInterval(function() {
  img.src = data[index].img;
  startButton.href = data[index].href

  // Update index either after or before previous calls based on your preference
  index = (index + 1) % data.length;
}, 2000);

Answer 4

One effective approach is to create an array that holds objects, each containing the image and its corresponding href link. By doing this, you can avoid using if-else conditions and keep your data organized in one central location.

It's important to note that arrays start at index 0, not 1.

let index = 0; // starting at 0

// Array containing image data with respective href links
const data = [
  { img: './img/wok.jpg', href: 'recipe.html' },
  { img: './img/croissant.jpg', href: 'recipe-2.html' },
  { img: './img/salad.jpg', href: 'recipe-3.html' },
];

const img = document.getElementById("section-1-img");
const startButton = document.getElementById('startButton');

setInterval(function() {
  img.src = data[index].img;
  startButton.href = data[index].href

  // Update index either after or before previous calls based on your preference
  index = (index + 1) % data.length;
}, 2000);

I am looking to update the 'startbutton.href' value based on the dynamic change in 'img.src'. Unfortunately, the if-else statement has proven ineffective in achieving this

Answer №1

Answer №2

Similar questions

Checking Ember.js - How to retrieve the status of each checkbox individually

Restricting array elements through union types in TypeScript

Is there a way to determine if this particular element is the initial one with its class throughout the entire document?

Angular 8 allows for the creation of custom checkboxes with unique content contained within the checkbox itself, enabling multiple selection

Perpetual duplication of data occurs upon inserting an item into the Array state of a React component

Problems with the zoom functionality for images on canvas within Angular

Display Material Popup in Angular before user leaves the page

What is the process for retrieving values from dynamic textareas using Vue JS?

Execute HTML and JS files through Eclipse PDT to view in a web browser

Exporting Canvas data without the alpha channel

Troubleshooting iFrame Loading Issues with HTML5 PostMessage

Having Trouble Concealing an Element with jQuery UI

Is it possible to incorporate an editable text feature within react-moveable? (Allowing for both dragging and editing capabilities)

Creating a switch case statement within a specific scope

The utcParse() function in D3.js might return a null value

Creating custom outlines for CSS shapes

Is it true that nodejs's q denodeify doesn't execute functions in then, fail, or fin blocks?

What considerations need to be made for testing a component that relies on other components as well?

Obtaining the designated item within the list

What is the proper way to implement an if-else statement within objects?