eventhandler - javascript addEventListener not working more than once

Question

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>

Answer 1

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.