I'm using a select list to change the color of a preview image of a picture of a shirt. So I have a global variable named chosenColor and I want to use that to change the picture when I select a color from the select list. It only works to change the color to blue but it won't work to change the color back to red.

This is the relevant javascript

var chosenColor="Red";

function chooseBlue() {
     document.getElementById("largerview").src = "bluezigzag.jpg";
     chosenColor = "Blue";
     }

function chooseRed() {
     document.getElementById("largerview").src = "redzigzag.jpg";
     chosenColor = "Red";
     }


function getSelectionChange() {      //selects the color that the user selects in the selection list
     if (this.value = "red") {
         chooseBlue();
         window.alert(chosenColor);
     }
     else if (this.value = "blue") {
         chooseRed();
         window.alert(chosenColor);
     }
}

And this is the selection list

<select size="1" name="color" onchange="getSelectionChange();">
     <option value="red">Red</option>
     <option value="blue">Blue</option>
</select>       

I'm using a select list to change the color of a preview image of a picture of a shirt. So I have a global variable named chosenColor and I want to use that to change the picture when I select a color from the select list. It only works to change the color to blue but it won't work to change the color back to red.

This is the relevant javascript

var chosenColor="Red";

function chooseBlue() {
     document.getElementById("largerview").src = "bluezigzag.jpg";
     chosenColor = "Blue";
     }

function chooseRed() {
     document.getElementById("largerview").src = "redzigzag.jpg";
     chosenColor = "Red";
     }


function getSelectionChange() {      //selects the color that the user selects in the selection list
     if (this.value = "red") {
         chooseBlue();
         window.alert(chosenColor);
     }
     else if (this.value = "blue") {
         chooseRed();
         window.alert(chosenColor);
     }
}

And this is the selection list

<select size="1" name="color" onchange="getSelectionChange();">
     <option value="red">Red</option>
     <option value="blue">Blue</option>
</select>       

• javascript
• select
• onchange

1 Answer 1

You are using the assignment operator = instead of the parison operator === or ==:

if (this.value = "red") {

...

else if (this.value = "blue") {

should be

if (this.value === "red") {

...

else if (this.value === "blue") {

When you use this.value = "red" it sets the value to "red" and then the expression returns "red" - which is truthy, so execution goes into that if block.

Have you considered replacing the separate choose colour functions with something like this:

function getSelectionChange() {
     document.getElementById("largerview").src = this.value + "zigzag.jpg";
     window.alert(this.value);
}

Obviously you could still set a global chosenColor variable, but I'm not sure what you'd need it for.

EDIT: Also if you are using an inline onchange= handler to call a function, this will be the element in question within the onchange attribute's code, but not in the function called from there - unless you explicitly set it:

onchange="getSelectionChange.call(this);"