slider updated text / text updated slider

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
c143

c143 hat kostenlosen Webspace.
16:14, 12.5.2013
Hallo, hab mir kurz folgendes zusammengeschrieben:
```
<!DOCTYPE html>
<html>
	<head>
		<script>
			function update(id, value){
				document.getElementById(id).setAttribute('value', value);
			}
		</script>
	</head>
	<body>
		<input id="s1" type="range" min="0" max="100" value="50" onchange="update('t1', this.value)" /><br />
		<input id="t1" type="text" value="50" onkeyup="update('s1', this.value)" />
	</body>
</html>
```
Sobald man etwas in die Textbox schreibt, sollte es beim slider ebenfalls so sein, und umgekehrt. Funktioniert zuerst auch, aber wenn ich z.B. Zuerst in der Textbox 60 eingebe, dann ändert der Slider zwar auch auf 60, aber wenn ich den ändern will, änderts nicht mehr zurück. Man kann nur immer ändern, was man zuerst geändert hat. Woran liegt das?
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

10:55, 13.5.2013

Hallo

Ich habe das mal ausprobiert. Die Lösung war das Casting. Da die Inputbox Werte vom Type String zurückgibt, muss es zuerst auf Number() gecastet werden.

<!DOCTYPE html>
<html>
    <head>
        <script>
            var a=0;
            function update(id, value){
                if(a==0){
                    a=1;
                    var ob = document.getElementById(id);
                    if(id=="s1"){
                        if(value==""){
                            ob.value= 0;
                        }else if(value>Number(ob.max)){
                            ob.value=Number(ob.max);
                        }else
                            ob.value = Number(value);
                    }else{
                        ob.value=value;
                    }
                    a=0;
                }
            }
        </script>
    </head>
    <body>
        <input id="s1" type="range" min="0" max="100" value="50" onchange="update('t1', this.value)" /><br />
        <input id="t1" type="text" value="50" onkeyup="update('s1', this.value)" />
    </body>
</html>

Lg Moe

Autor dieses Themas

c143

c143 hat kostenlosen Webspace.

17:33, 13.5.2013

Vielen Dank! Ich habs noch ein bisschen abgeändert

<!DOCTYPE html>
<html>
    <head>
        <script>
            function update(id, value){
            	var a = 0;
                if(a == 0){
                    a = 1;
                    var ob = document.getElementById(id);
                    var type = ob.getAttribute(type);
                    if(type == "range"){
                        if(value==""){
                            ob.value= 0;
                        }else if(value>Number(ob.max)){
                            ob.value=Number(ob.max);
                        }else
                            ob.value = Number(value);
                    }else{
                        ob.value=value;
                    }
                    a=0;
                }
            }
        </script>
    </head>
    <body>
        <input id="s1" type="range" min="0" max="100" value="50" onchange="update('t1', this.value)" /><br />
        <input id="t1" type="text" value="50" onkeyup="update('s1', this.value)" />
    </body>
</html>

1) Eigentlich egal, aber a variable ist jetzt in der Funktion selbst.
2) Du hast auf s1 abgefragt, und das für mehrere Slider gedacht ist, frag ich den typ ab, aber konntest du ja nicht wissen. :)

Also Danke nochmal!

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city