JavaScript Wert von "range" auslesen.

rony12 · 13. Februar 2013

Hallo,

es gibt ja seit HTML5 ein neues Formular(modul) - type="range".

Damit Spiele ich gerade etwas rum - abgesehen davon, dass viele Browser das noch nicht anzeigen können, würde ich gerne passend zum gerade eingestellten Wert, einen kleinen Text anzeigen lassen.

So sieht das aktuelle bei mir aus:

HTML:

<input type="range" min="1" max="5" step="1" />

Nun würde ich gerne bei jeder Zahl (von 1 - 5) einen kleinen Text anzeigen lassen.
Ich denke mal, dass man das irgendwie mit JS auslesen kann (von wegen value und so...)

Hat da jemand eine Idee ?

Spike S. · 13. Februar 2013

Das bekommst du über das Value Attribut des Objektes.

Code:

function sliderChoosen(elem) {
  switch(elem.value) {
    case 1:
      // tu was bei 1...
      break;
    case 2:
      // tu was bei 2...
      break;
    case 3:
      // tu was bei 3...
      break;
    case 4:
      // tu was bei 4...
      break;
    case 5:
      // tu was bei 5...
      break;
  }
}

HTML:

<input type="range" min="1" max="5" onchange="sliderChoosen(this);" step="1" />

palace4d · 13. Februar 2013

Kleines einfaches Beispiel mit Farben

Code:

<div class="test">
  <label>Rot</label><input type="range" min="0" max="255" id="r" name="r" />
  <label>Grün</label><input type="range" min="0" max="255" id="g" name="g" />
  <label>Blau</label><input type="range" min="0" max="255" id="b" name="b" />
  <h2>Meine Farbe wird geändert</h2>
</div>

Code:

   ; (function () {
	var test = document.querySelector('.test');
     //Feature Unterscheidung
     function support() {
       var i = document.createElement('input');
       i.setAttribute('type', 'range');
       return i.type === 'range'; 
     }
     //support = true/false
     if (support()) {
       var heading = document.querySelector('h2');
       var r = document.querySelector('#r');
       var g = document.querySelector('#g');
       var b = document.querySelector('#b');

       test.addEventListener("change", function () {
         //Array mit kommatrennung(join(",")) da rgb(0,0,0);
         heading.style.color = 'rgb(' + [r.value, g.value, b.value].join(',') + ')';
       }, false);
     }
   })();

rony12 · 13. Februar 2013

vielen dank für die Beispiele

ich habe das jetzt mal ganz einfach probiert:

HTML:

<html>
<header></header>
<body>
<input type="range" min="1"  max="5" onchange="sliderChoosen(this);" step="1" />
</body>
    <script>
            function sliderChoosen(elem) {
                switch(elem.value) {
                    case 1:
                        alert("1");
                    break;
                    case 2:
                        alert("2");
                    break;
                    case 3:
                        alert("3");
                    break;
                    case 4:
                        alert("4");
                    break;
                    case 5:
                        alert("5");
                    break;
                }
            }
        </script>
</html>

es es funktioniert nicht - also es sollte ja nun eine meldung kommen in dem die Zahl ausgeben werden.

End endeffekt hab ich mir das zwar so vorgestellt, dass diese Zahl unter dem "slider" angezeigt wird.

palace4d · 13. Februar 2013

Das script Tag ist außerhalb des bodys.

Code:

function sliderChoosen(elem) {
alert(elem.value);
}

rony12 · 13. Februar 2013

ich denke mal, dass das egal ist - oder?

wenn ich

HTML:

<script>
    <!--
     alert("Hallo Welt!");
    //-->
    </script>

außerhalb des Bodys mache, dann funktioniert das.

palace4d · 13. Februar 2013

Ist nicht valide, danke deinem Browser das der integrierte Fehleralgorhytmus das ausbügelt. Weiterhin gehört das Element header in den body. Du meinst in dem Fall sicherlich head, also ohne er.

DasBoeseLebt · 13. Februar 2013

elem.value gibt dir einen String zurück, keine Zahl (int).

Daher musst du es umcasten oder case '1': etc. schreiben, dann funktioniert es.

ps:
Das <script>-Tag kann stehen wo es mag.

palace4d · 13. Februar 2013

Code:

ps:
 Das <script>-Tag kann stehen wo es mag.

Unfug! Dann ist das Markup nicht valide und es schadet der Performance, da der Browser unnötig Fehler korrigieren muss.

DasBoeseLebt · 13. Februar 2013

Ja, natürlich ist ein <script>-Tag außerhalb des <head> oder <bodys> nicht valide, aber den Browsern ist das total egal.
Du kannst es sogar außerhalb des </html> hinsetzen, was nochmal krasser ist.

Alles valide zu halten, ist schön und sollte das Ziel sein,... und deshalb war auch mein ps eher dazu gedacht, dass deine Fehleranalyse mit dem <script> außerhalb des <bodys> falsch ist, den es funktioniert trotzdem.
Die Browser fressen den ganzen Tag zu 98% nicht validen Code.

Spike S. · 13. Februar 2013

Der <script> gehört in den Kopf des Dokumentes. Außerhalb sind ungeahnte Fehler zu erwarten. Bei dem obigen Fehler-Beispiel ist die Funktion vermutlich einfach unbekannt. Was bei onchange aber schiefgeht, findet man mit der Entwickler-Konsole heraus. Ich nehme an hier ist Chrome im Einsatz: F12 drücken, Seite neu laden, auf den letzten Tab "Console" wechseln und in der Seite mal am Regler rumschieben. Javascript Fehler sieht man dann hier.

@ DasBoeseLebt: Ist in dem Fall völlig egal, da switch() keinen typsicheren Vergleich (Unterschied und Hintergrund zwischen == und === lässt sich ergooglen) macht. In JS sind ja Datentypen erstmal grundsätzlich einfach zu handhaben, intern wird immer versucht zu konvertieren. Daraus ergibt sich: 1 == "1" > true (Gegenbeispiel: 1 === "1" > false)

Edit: der 100ste

DasBoeseLebt · 13. Februar 2013

Teste es halt aus, entweder du setzt '' oder du wandelst das vorher mit parseInt um.

palace4d · 13. Februar 2013

Ja, natürlich ist ein <script>-Tag außerhalb des <head> oder <bodys> nicht valide, aber den Browsern ist das total egal.

Lass mal den Server als Mime Type text/xhtml(oft bei internen Redaktionssytemen) rauswerfen ... da siehste nichts mehr von deinem Markup

rony12 · 13. Februar 2013

öhm ok...

da war ich nur kurz bei der Post und hier was schon was los ^^

Also mit hatte mal jemand erzählt, dass es zwar nicht valide ist <script> nach "unten" zu setzten - es jedoch die performance in manchen fällen erhöhen kann.
Weil erst alles schön geladen und angfezeigt wird, und erst als letztes das JS dargestellt wird. Seit dem hab ich <script> immer unten stehen.

ich versuch es mal ^^...das anzuwenden was ihr vorschlagt

palace4d · 13. Februar 2013

Script ganz unten ist schon ok, wenn dann am Ende des bodys und nicht nach dem body.

Spike S. · 13. Februar 2013

DasBoeseLebt schrieb:
Teste es halt aus, entweder du setzt '' oder du wandelst das vorher mit parseInt um.

Bitte: http://jsfiddle.net/XN5Sd/1/ (benötigt Chrome, Regler auf 1 schieben)
Parsen ist hier unnötig.

DasBoeseLebt · 13. Februar 2013

Spike S. schrieb:
Bitte: http://jsfiddle.net/XN5Sd/1/ (benötigt Chrome, Regler auf 1 schieben)
Parsen ist hier unnötig.

Krasse Ignoranz. (http://jsfiddle.net/XN5Sd/4/)
Habs geupdatet, schieb es mal wieder auf 1.
(Parsen oder '' muss sein)

Code:

<html><head></head><body>
    <input type="range" min="1" max="5" onchange="sliderChoosen(this);" step="1" value="2" />
    <span id="val"></span>
    <span id="out1"></span>
    <span id="out2"></span>
    <span id="out3"></span>
    <span id="switch1"></span>
    <span id="switch2"></span>
    <span id="switch3"></span>
    </body></html>

Code:

function sliderChoosen(elem) {
    document.getElementById("val").innerHTML = "value: " + elem.value;
    document.getElementById("out1").innerHTML = "-> ungeparsed regulärer Vergleich: " + (elem.value == 1);
    document.getElementById("out2").innerHTML = "-> ungeparsed typsicherer Vergleich: " + (elem.value === 1);
    document.getElementById("out3").innerHTML = "-> geparsed typsicherer Vergleich: " + (parseInt(elem.value) === 1);
    
    
    switch(elem.value){
        case '1':
            document.getElementById("switch1").innerHTML = "Klappt";
        break;
        default:
            document.getElementById("switch1").innerHTML = "Klappt nicht";
    }
    
    
    switch(elem.value){
        case 1:
            document.getElementById("switch2").innerHTML = "Klappt";
        break;
        default:
            document.getElementById("switch2").innerHTML = "Klappt nicht";
    }
    
    
    switch(parseInt(elem.value)){
        case 1:
            document.getElementById("switch3").innerHTML = "Klappt";
        break;
        default:
            document.getElementById("switch3").innerHTML = "Klappt nicht";
    }
    
    

	}

Code:

value: 1
-> ungeparsed regulärer Vergleich: true
-> ungeparsed typsicherer Vergleich: false
-> geparsed typsicherer Vergleich: true
Klappt
Klappt nicht
Klappt

rony12 · 13. Februar 2013

soa... ich will mal zeigen wass ich dann daraus gemacht habe:

Der Regler sollte den Grad anzugriffsrechten bestimmen.

HTML:

<p class="si_header" style="margin-bottom: 10px;" id="jeder_acl_anzeige"></p>
            <p><input type="range" min="0" max="4" step="1" onchange="acl_unreg(this.value, <?=$zahl?>);" value="<?=$werte['unreg_user']?>" id="jeder" /></p>

HTML:

<script>
    function acl_unreg(str, eintrag){
     if (str==""){
       document.getElementById("txtHint").innerHTML="";
       return;
      }
     if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
     
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","to_acl.php?aclunreg="+str+"&eintrag="+eintrag,true);
        xmlhttp.send();
        
        var anzeige;
        switch(str) {
            case '0':
                anzeige = "nichts sehen.";
                break;
            case '1':
                anzeige = "einsehen.";
                break;
            case '2':
                anzeige = "hinzufügen.";
                break;
            case '3':
                anzeige = "verändern.";
                break;
            case '4':
                anzeige = "löschen.";
                break;
        }
        document.getElementById('jeder_acl_anzeige').innerHTML = "Jeder kann " + anzeige;
    }
    </script>

Die Rechte werden dann sofort in die Datenbank geschrieben

Daaron · 13. Februar 2013

Spike S. schrieb:
Der <script> gehört in den Kopf des Dokumentes.

Je nachdem... Wenn man Scripts in den <head> schreibt muss man üblicherweise ein DOMready-Event verwenden, um die Scripts wirklich konsistent auszuführen (z.B. Image Slider). Schreibt man die Scripts vor </body> braucht man das nicht mehr. Außerdem sorgen Scripts gern mal dafür, dass Elemente zum DOM hinzugefügt, entfernt oder verschoben werden. Macht man das an der falschen Stelle verzögert es den Seitenaufbau enorm.
Genau dafür gibts aber asynchrone Scriptaufrufe und deferred loading.

Spike S. · 14. Februar 2013

DasBoeseLebt schrieb:
Krasse Ignoranz. (http://jsfiddle.net/XN5Sd/4/)
Habs geupdatet, schieb es mal wieder auf 1.
(Parsen oder '' muss sein)
....

Danke, war der festen Überzeugung switch vergleicht nicht typsicher.

@rony12: Wenn die Werte in der DB richtig ankommen ist es OK. Ist ja ein Adminbereich oder? Weil die Lösung hat den Nachteil, dass durch wildes rumschieben viele viele Requests abgesetzt werden. Wenn das aber nur 1 oder 2 Leute machen können...

JavaScript Wert von "range" auslesen.

Commodore Pro

Commander

Lt. Commander

Commodore Pro

Lt. Commander

Commodore Pro

Lt. Commander

Lieutenant

Lt. Commander

Lieutenant

Commander

Lieutenant

Lt. Commander

Commodore Pro

Lt. Commander

Commander

Lieutenant

Commodore Pro

Fleet Admiral

Commander

Ähnliche Themen