JavaScript只能运行一次

Question

I have a javascript that seems to only run once. I am using this to select the colour of a letter inside a div. When I select the colour initially it works but then will not select a different colour.

This is the select:

 <div style = "position: absolute; left: 360px; top: 590px;" >    
 <select id="selectcolor1" name="selectcolor1" style="width: 150px;">
                    <option value="null">Select a Motif Color...</option>
                    <option value="black">Black</option>
                    <option value="blue">Blue</option>
                    <option value="darkblue">Dark Blue</option>
                    <option value="pink">Pink</option>
                    <option value="green">Green</option>
                    <option value="orange">Orange</option>
                    <option value="seagreen">Sea Green</option>
                    <option value="red">Red</option>
                    <option value="darkgreen">Dark Green</option>
                    <option value="bergundy">Bergundy</option>
                    <option value="cyan">Cyan</option>
                    <option value="magenta">Magenta</option>
                    <option value="mustard">mustard</option>
                    <option value="purple">Purple</option>

This is the javascript:

 $('#selectcolor1').change(function() {
var color = this.value || '';
$('.selectcolor1').attr('class', function(i, classes) {
    var cls = classes.split(/[\s]/);
    cls[2] = color;
    return cls.join(' ');
});
 e.preventDefault();
});  

I probably should have mentioned I am using the script to change to different Div's colours apologies my fault:

      <div style = "position: absolute; left: 750px; top: 313px;" 
class="selected-value  selectcolor1" id ="motif" ></div>


<div style = "position: absolute; left: 750px; top: 313px;" 
class="selected-value1 selectcolor1" id ="motif1" ></div>

Any help would be great thank you!

Answer 1

Couple of problems here.

As @cport noted, you are not declaring the e variable you are referring to in e.preventDefault() . This needs to come in the change function handler.

As @dsuess noted, your code is changing the class on a tag with class="selectcolor1", which isn't in your pasted code - please make sure this is correct.

Also, this code will work with the jsfiddle provided below since it sets the target's third class and the target has two classes initially. However, if you change the target HTML to have three or more classes from the start, the Javascript code will overwrite the third class.

But having said that, this works with the current code:

$('#selectcolor1').change(function(e) {
    var color = this.value || '';
    $('.selectcolor1').attr('class', function(i, classes) {
        var cls = classes.split(/[\s]/);
        cls[2] = color; // third class becomes the color value
        return cls.join(' ');
    });
    e.preventDefault();
});

Answer 2

As @cport1 stated, the anonymous function is missing the e parameter:

$('#selectcolor1').change(function(e) { ...

This will cause the JS to be fired only once and then error because there is no reference to e in that function's scope.

Answer 3

You are missing the e parameter in your event binding:

 $('#selectcolor1').change(function()

replace with

 $('#selectcolor1').change(function(e)