javascript addEventListener не работает более одного раза

Question

Я пытаюсь сделать относительно простую javascript-программу/страницу, всего 3 ползунка RGB, чтобы повлиять на цвет квадрата и круга.

Это прекрасно работает, когда у меня есть слушатели событий «инлайн» с входными элементами: то есть, onchange="someFunction(x,y)"

Однако, когда я перехожу слушатель событий, чтобы быть в JavaScript, и использовать addEventListener, он работает только один раз когда страница загружается, а затем никогда больше ... почти как если бы был вызван removeEventListener, но я этого не сделал.

Да, я убедился, что все элементы загружены на страницу, прежде чем я позвоню в javascript.

Я изменил этот код, чтобы просто дать мне ALERT вместо фактического вызова моей желаемой функции slideUpdate, только для целей отладки.

Здесь: 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 файл:

<!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> 

Answer 1

addEventListener в качестве второго параметра ссылается на функцию. Здесь вы вызываете функцию напрямую, когда пытаетесь ее добавить. Это должно сработать для вас:

document.addEventListener('DOMContentLoaded', function() { 
    alert("document loaded!"); 
    sliderRed.addEventListener("change", function(){alert(sliderRed.value)}); 
    // wrapped in a function 
}); 

Вам необходимо применить этот шаблон ко всем вашим событиям.

Answer 2

sliderRed.addEventListener("change", alert(sliderRed.value)); немедленно вызова функции оповещения и присвоение возвращаемого значения прослушивателя событий, завернуть его в затворе и он будет работать:

sliderRed.addEventListener("change", function(){ 
    alert(sliderRed.value) 
});