javascript - Using the onchange event to get value of select color list in order to change a picture - Stack Overflow

admin管理员组

文章数量:1022793

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

Share Improve this question Follow asked Apr 25, 2013 at 20:43 user2234760user2234760 14333 gold badges55 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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);"

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

Share Improve this question Follow asked Apr 25, 2013 at 20:43 user2234760user2234760 14333 gold badges55 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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);"

本文标签：