I'm trying to do a relatively simple javascript program/page, just 3 sliders RGB to affect the color of a square and circle.
It works GREAT when I have the event listeners 'inline' with the input elements: i.e., onchange="someFunction(x,y)"
However, when I move the event listeners to be in the javascript, and use addEventListener, it only works ONCE when the page loads, and then never again...almost as if a removeEventListener has been called, but I haven't done that.
Yes, I made sure that all elements are loaded on the page before I call the javascript.
I have altered this code to just give me an ALERT instead of actually calling my desired function slideUpdate, just for debugging purposes.
Here it is: JAVASCRIPT:
var colorBox = document.getElementById("colorbox");
var colorCircle = document.getElementById("colorCircle");
var colorPicker = document.getElementById("colorPicker");
var sliderRed = document.getElementById("Red");
var sliderGreen = document.getElementById("Green");
var sliderBlue = document.getElementById("Blue");
//sliderRed.addEventListener("onchange", alertForDebug() );
//sliderRed.addEventListener("onclick", alert(sliderRed.value) );
document.addEventListener('DOMContentLoaded', function () {
alert("document loaded!");
sliderRed.addEventListener("change", alert(sliderRed.value) );
//document.querySelector('#Red').addEventListener('change', slideUpdate(sliderRed.value, sliderRed.id) );
//document.querySelector('#Green').addEventListener('onchange', slideUpdate(this.value, this.id) );
//document.querySelector('#Blue').addEventListener('onchange', slideUpdate(this.value, this.id) );
} );
function slideUpdate(value, elementID) {
alert("slideUpdate("+value+","+elementID+")");
//console.log("function slideMe() reached. value=" + value + " elementID="+elementID);
//rangeSlider.innerHTML = "Value=";// + rangeSlider.value;
//document.getElementById(elementID).innerText = "Value=" + value;
//elementID.innerText = value;
//console.log(elementID + "Display");
document.getElementById(elementID+"Display").innerHTML = "Value=" + value; //could do this using variables instead of getElementById each time
//now update the color box to reflect current color
var currentColor = colorBox.style.backgroundColor;
var splitString = currentColor.split(",");
var red = parseInt(splitString[0].slice(4)); //don't the "rgb(" in there
var green = splitString[1];
var blue = parseInt(splitString[2]);
var newColor = "rgb("; //incomplete
console.log(currentColor + "value = " + value);
console.log("splitString=" + splitString);
console.log("old color red="+red +" green="+green+" blue="+blue);
switch(elementID) {
case "Red":
//alert("Red");
newColor = "rgb("+value.toString()+","+green+","+blue;
red=value;
break;
case "Green":
newColor = "rgb("+red+","+value.toString()+","+blue;
green=value;
break;
case "Blue":
newColor = "rgb("+red+","+green+","+value.toString()+")";
blue=value;
break;
}
//console.log(value.toString(16));
colorBox.style.backgroundColor = newColor;
colorCircle.style.fill = newColor;
console.log("new color red="+red +" green="+green+" blue="+blue);
var convertedColor = rgbToHex(red, green, blue);
colorPicker.value = convertedColor;
console.log("convertedColor="+convertedColor);
}
/*
function rgbToHex(red, green, blue) {
var rgb = blue | (green << 8) | (red << 16);
return '#' + (0x1000000 + rgb).toString(16).slice(1);
//return '#' + rgb.toString(16)
}*/
/*function rgbToHex(r, g, b) {
if(r < 0 || r > 255) alert("r is out of bounds; "+r);
if(g < 0 || g > 255) alert("g is out of bounds; "+g);
if(b < 0 || b > 255) alert("b is out of bounds; "+b);
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1,7);
}*/
function hexstr(number) {
var chars = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
var low = number & 0xf;
var high = (number >> 4) & 0xf;
return "" + chars[high] + chars[low];
}
function rgbToHex(r, g, b) {
return "#" + hexstr(r) + hexstr(g) + hexstr(b);
}
function updateColor(newColor) {
console.log(newColor);
colorBox.style.backgroundColor = newColor;
colorCircle.style.fill = newColor;
colorPicker.value = newColor;
var red = parseInt("0x"+newColor.slice(1,3));
var green = parseInt("0x"+newColor.slice(3,5));
var blue = parseInt("0x"+newColor.slice(5));
//now update the sliders
document.getElementById("Red").value= red;
document.getElementById("Green").value= green;
document.getElementById("Blue").value= blue;
document.getElementById("RedDisplay").innerHTML = "Value=" + red;
document.getElementById("GreenDisplay").innerHTML = "Value=" + green;
document.getElementById("BlueDisplay").innerHTML = "Value=" + blue;
}
HTML file:
<!DOCTYPE HTML>
<HTML>
<head>
<p align="center"> Light Controller</p>
</head>
<body>
<p>Use the sliders to control the light R,G,B values for color displays below.</p>
<div>
<label for="Red">Red 0
<input type="range" ID="Red" min=0 max=255 ></input>
255
<label ID="RedDisplay">Value=</label>
</label>
</div>
<div>
<label for="Green">Grn 0
<input type="range" ID="Green" min=0 max=255></input>
255 <label ID="GreenDisplay"> Value=</label></label>
</div>
<div>
<label for="Blue">Blu 0
<input type="range" ID="Blue" min=0 max=255></input>
255 <label ID="BlueDisplay"> Value=</label></label>
</div>
</body>
<input id="colorbox" STYLE="background-color: #FF0000;""></input>
<svg width="100" height="100">
<circle id="colorCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
<input type="color" id="colorPicker" onchange="updateColor(this.value)"></input>
<script src="LiteCntrlMain.js"></script>
addEventListener takes a function reference as its second parameter. Here, you're directly calling the function when you try to add it. This should work for you:
document.addEventListener('DOMContentLoaded', function () {
alert("document loaded!");
sliderRed.addEventListener("change", function(){alert(sliderRed.value)} );
// wrapped in a function
} );
You'll have to apply this pattern to all of your events.
sliderRed.addEventListener("change", alert(sliderRed.value) ); is immediately invoking the alert function and assigning the return value to your event listener, wrap it in a closure and it will work:
sliderRed.addEventListener("change", function(){
alert(sliderRed.value)
});
来源：https://stackoverflow.com/questions/26243029/javascript-addeventlistener-not-working-more-than-once