Ich versuche, ein relativ einfaches Javascript-Programm / eine relativ einfache Javascript-Seite zu erstellen. Nur drei RGB-Schieberegler beeinflussen die Farbe eines Quadrats und eines Kreises.

Es funktioniert sehr gut, wenn ich die Ereignis-Listener 'inline' mit den Eingabeelementen habe: d. H.onchange="someFunction(x,y)"

Allerdings, wenn ich die Ereignis-Listener bewege, um im Javascript zu sein, und benutzeaddEventListener, es funktioniert nur EINMAL, wenn die Seite geladen wird, und dann nie wieder ... fast so, als ob einremoveEventListener wurde aufgerufen, aber ich habe das nicht getan.

Ja, ich habe sichergestellt, dass alle Elemente auf der Seite geladen sind, bevor ich das Javascript aufrufe.

Ich habe diesen Code so geändert, dass ich nur einen ALERT erhalte, anstatt die gewünschte Funktion aufzurufen.slideUpdate, nur zum Debuggen.

Hier ist es: 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-Datei:

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