✔ input-Werte per plus/minus ändern

E

EduDeLuxe

Grünschnabel
Hallo Leute,

ich habe bereits verschiedene (Ajax/jQuery) Skripte gefunden, um die Werte eines Input-Feldes per "Schalter" (+/-) zu ändern. Leider besteht bei keinem die Möglichkeit verschiedene Input-Felder mit dieser Funktion auszustatten. Die ID's der Felder sind dynamisch, d.h. bei allen Input-Feldern unterschiedlich ...

Am besten gefällt mir diese Lösung http://www.stevefenton.co.uk/cmsfiles/assets/File/uppydowner.html. Ich hatte bereits vergeblich versucht das Skript mehrfach mit verschiedenen Selektoren einzubauen. Aber vielleicht hat ja einer von Euch eine Idee ...

Jetzt schon vielen Dank für Eure Hilfe
Edu
 
Ich habe eine einfachere Lösung anzubieten,
HTML: 
<html>
<head>
<script>
function inc(out){
    field = document.getElementById(out);
    field.value++;
}
function dec(out){
    field = document.getElementById(out);
    field.value--;
}
</script>
</head>
<body>
<div class="value-change">
    <input type="text" id="out" value="0" size="3" />
    <button type="button" id="dec"  
     onclick="dec('out');">-</button>
   <button type="button" id="inc"
  onclick="inc('out');">+</button> 
<br/>
     <input type="text" id="out2" value="0" size="3" />
    <button type="button" id="dec2"
     onclick="dec('out2');">-</button>
     <button type="button" id="inc2"
    onclick="inc('out2');">+</button>    
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Mag schon sein, dass deine Lösung einfacher ist, aber nicht schöner. Man sollte immer, wenn möglich (kann mir gerade keinen Fall vorstellen, in dem es nicht möglich ist), Programmtext auslagern in den entsprechenden Bereich und HTML HTML sein lassen, also ohne da Funktionen zu platzieren.
 
Danke für deine Antwort, mir war nicht klar, welchen Vorteil deine Lösung hat.
Allerdings sehe ich die einfachere Lösung in einigen Fällen trotzdem im Vorteil. Die einfachere Lösung ist einfacher nachzuvollziehen und leichter zu debuggen, insbesondere für jemanden der nicht so versiert in JS ist bzw. in Jquery.
Wenn ich das richtig sehe, musst du für jedes Inputfeld einen eigenen Div erzeugen, oder?
 
ikosaeder hat gesagt.:
... Wenn ich das richtig sehe, musst du für jedes Inputfeld einen eigenen Div erzeugen, oder?
Zum Vergrößern anklicken....
Hallo ikosaeder,

wenn ich das richtig sehe, verwendest du in dem kurzen Stück Quelltext die ID "dec" und die ID "inc" zweimal. Dadurch wird das HTML invalid, außerdem gibt es im HTML das alleinstehende End-Tag "</br>" nicht.
 
Ja habe ich, ich habe meinen Beitrag entsprechend korrigiert. Die Button ID wird für die Funktionalität allerdings nicht benötigt.
 
@ikosaeder: Man muss das nicht mit einer eigenen DIV-Box lösen sondern kann es auch so lösen, dass man jedem entsprechendem Eingabefeld eine Klasse zuweist und dann nach Buttons direkt vor und nach diesem Feld sucht und diese an das Eingabefeld bindet. Somit spart man sich auch die DIV-Box: http://jsfiddle.net/MeiKatz/pA2FV/13/
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück