JavaScript Wert von "range" auslesen.

rony12

Commodore
Dabei seit
Jan. 2007
Beiträge
4.222
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.

Lieutenant
Dabei seit
Feb. 2012
Beiträge
524
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

Lt. Commander
Dabei seit
Okt. 2007
Beiträge
1.179
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);
     }
   })();
 
Zuletzt bearbeitet:

rony12

Commodore
Ersteller dieses Themas
Dabei seit
Jan. 2007
Beiträge
4.222
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

Lt. Commander
Dabei seit
Okt. 2007
Beiträge
1.179
Das script Tag ist außerhalb des bodys.

Code:
function sliderChoosen(elem) {
alert(elem.value);
}
 
Zuletzt bearbeitet:

rony12

Commodore
Ersteller dieses Themas
Dabei seit
Jan. 2007
Beiträge
4.222
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

Lt. Commander
Dabei seit
Okt. 2007
Beiträge
1.179
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

Lieutenant
Dabei seit
Jan. 2010
Beiträge
686
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

Lt. Commander
Dabei seit
Okt. 2007
Beiträge
1.179
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

Lieutenant
Dabei seit
Jan. 2010
Beiträge
686
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.

Lieutenant
Dabei seit
Feb. 2012
Beiträge
524
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 :)
 
Zuletzt bearbeitet:

palace4d

Lt. Commander
Dabei seit
Okt. 2007
Beiträge
1.179
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

Commodore
Ersteller dieses Themas
Dabei seit
Jan. 2007
Beiträge
4.222
ö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

Lt. Commander
Dabei seit
Okt. 2007
Beiträge
1.179
Script ganz unten ist schon ok, wenn dann am Ende des bodys und nicht nach dem body.
 

DasBoeseLebt

Lieutenant
Dabei seit
Jan. 2010
Beiträge
686
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
 
Zuletzt bearbeitet: (Link eingefügt.)

rony12

Commodore
Ersteller dieses Themas
Dabei seit
Jan. 2007
Beiträge
4.222
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
 
Zuletzt bearbeitet:

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
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.

Lieutenant
Dabei seit
Feb. 2012
Beiträge
524
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...
 
Top