javascript addEventListener가 두 번 이상 작동하지 않습니다.

Question

저는 비교적 간단한 자바 스크립트 프로그램/페이지를 시도하고 있습니다. 단지 3 개의 슬라이더 RGB로 사각형과 원의 색상에 영향을줍니다.

내가 입력 요소와 함께 이벤트 리스너 '인라인'을 가질 때 잘 작동합니다 : 즉, 나는 자바 스크립트, 그리고 addEventListener를 사용하는 이벤트 리스너를 이동할 때 onchange="someFunction(x,y)"이

그러나, 한 번만 작동 페이지가로드 될 때, 그리고 다시는 다시는 ... 거의 마치 removeEventListener이 호출 된 것처럼 보이지만, 나는 그렇게하지 않았습니다.

예, 자바 스크립트를 호출하기 전에 모든 요소가 페이지에로드되었는지 확인했습니다.

디버깅 목적으로 실제로 원하는 함수 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) 
});