Question

I created some divs; their innerHTML properties get changed according to the current image shown (defined by imageArray[value]). The problem I have is that conditionals in this function do not work as they should. This function runs every statement and stops at the values in the last conditional bracket. It could be a logic issue or a missing piece of code, but I would like to have your thoughts on how this problem can be solved.

This function gets triggered through prevImage() or nextImage():

function textChange(){

var titleMod = document.getElementById('title');
var dateMod = document.getElementById('date');
var infoMod = document.getElementById('info');
var pagelink = document.getElementById('enter');

if(new_image = imageArray[0]){

    titleMod.innerHTML = "This is Image 1";
    dateMod.innerHTML = "july 12 12";
    infoMod.innerHTML = "<p>paragraph goes in here</p>";
    pagelink.onclick = "window.location.href='house.html';"

    alert('\o/');

    }

if(new_image = imageArray[1]){

    titleMod.innerHTML = "This is Image 2";
    dateMod.innerHTML = "july 12 19";
    infoMod.innerHTML = "<p>paragraph</p>";
    pagelink.onclick = "window.location.href='contact.html';"

    alert('lolol');

    }

if(new_image = imageArray[2]){

    titleMod.innerHTML = "This is Image 3";
    dateMod.innerHTML = "july 12 19";
    infoMod.innerHTML = "<p>paragraph</p>";
    pagelink.onclick = "window.location.href='contact.html';"

    alert('thisWorks');

    }

}

Answer 1

All your conditionals use assignment instead of comparison.

new_image = imageArray[2] sets new_image to the value of imageArray[2], which is a truthy value. You need to compare the two things instead, eg.

new_image === imageArray[2]

As for why they’re all running, instead of it short-circuiting as soon as the first condition is met, it’s because you’re using a sequence of independent if statements as opposed to a chain of if, else if and else.

if(new_image === imageArray[0]){
  ...
} else if(new_image === imageArray[1]){
  ...
} else if(new_image === imageArray[2]){
  ...
} else {
  // new_image doesn't meet any of the previous conditions
}