title: javascript addEventListener not working more than once
body: <p>I'm trying to do a relatively simple javascript program/page, just 3 sliders RGB to affect the color of a square and circle.  </p>
  
  <p>It works GREAT when I have the event listeners 'inline' with the input elements: i.e., <code>onchange="someFunction(x,y)"</code></p>
  
  <p>However, when I move the event listeners to be in the javascript, and use <code>addEventListener</code>, it only works ONCE when the page loads, and then never again...almost as if a <code>removeEventListener</code> has been called, but I haven't done that.</p>
  
  <p>Yes, I made sure that all elements are loaded on the page before I call the javascript.</p>
  
  <p>I have altered this code to just give me an ALERT instead of actually calling my desired function <code>slideUpdate</code>, just for debugging purposes.</p>
  
  <p>Here it is:
  JAVASCRIPT:</p>
  
  <pre><code>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 &lt;&lt; 8) | (red &lt;&lt; 16);
      return '#' + (0x1000000 + rgb).toString(16).slice(1);
      //return '#' + rgb.toString(16)
  }*/
  
  /*function rgbToHex(r, g, b) {
      if(r &lt; 0 || r &gt; 255) alert("r is out of bounds; "+r);
      if(g &lt; 0 || g &gt; 255) alert("g is out of bounds; "+g);
      if(b &lt; 0 || b &gt; 255) alert("b is out of bounds; "+b);
      return "#" + ((1 &lt;&lt; 24) + (r &lt;&lt; 16) + (g &lt;&lt; 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 &amp; 0xf;
      var high = (number &gt;&gt; 4) &amp; 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;
  }
  </code></pre>
  
  <p>HTML file:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;HTML&gt;
  
  &lt;head&gt;
  &lt;p align="center"&gt; Light Controller&lt;/p&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;p&gt;Use the sliders to control the light R,G,B values for color displays below.&lt;/p&gt;
  
  &lt;div&gt;
  &lt;label for="Red"&gt;Red 0
    &lt;input type="range" ID="Red" min=0 max=255 &gt;&lt;/input&gt;
  255 
  &lt;label ID="RedDisplay"&gt;Value=&lt;/label&gt;
  
  &lt;/label&gt;
  
  &lt;/div&gt;
  &lt;div&gt;
  &lt;label for="Green"&gt;Grn 0
    &lt;input type="range" ID="Green" min=0 max=255&gt;&lt;/input&gt;
  255 &lt;label ID="GreenDisplay"&gt; Value=&lt;/label&gt;&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;label for="Blue"&gt;Blu 0
    &lt;input type="range" ID="Blue" min=0 max=255&gt;&lt;/input&gt;
  255 &lt;label ID="BlueDisplay"&gt; Value=&lt;/label&gt;&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  
  &lt;input id="colorbox" STYLE="background-color: #FF0000;""&gt;&lt;/input&gt;
  
  
  
  &lt;svg width="100" height="100"&gt;
     &lt;circle id="colorCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="yellow" /&gt;
     Sorry, your browser does not support inline SVG.
  &lt;/svg&gt; 
  
  &lt;input type="color" id="colorPicker" onchange="updateColor(this.value)"&gt;&lt;/input&gt;
  
  &lt;script src="LiteCntrlMain.js"&gt;&lt;/script&gt;
  </code></pre>