Auf Thema antworten 2026

Beitrag

<blockquote data-quote="nullnullsix" data-source="post: 1652770" data-attributes="member: 203275">AW: [HTML] - Tag um Wert zu erhöhen/verkleinern[/b]SO! Ich bastelte ein wenig&nbsp; unter dem didaktischen Auge von video2brain, und siehe da ich habe das was ich wollte. Ich hätte nicht gedacht, dass das so einfach ist.Das Feld in dem die Zahl angezeigt wird, ist ein einfaches &lt;input&gt;-tag, das auf readonly=&quot;readonly&quot; gesetzt wird, und eine id hat über die es, und die attribute wie value und size in den funktionen inc() und dec() angesprochen werden kann. zwei &lt;a&gt;-tags mit onclick=&quot;inc(id-des-zugehörigen-input-tags)&quot; und onclick=&quot;dec(id)&quot; sorgen für die erhöhung und erniedrigung. Das Erhöhen/Verringern selbst findet&nbsp; in den funktionen inc und dec statt, und ist glaube ich auch für laien im Code gut nachvollziehbar! Als kleinen Schnickschnack habe ich noch eingebaut, dass man nicht weiter als 0 verringern kann, und, dass sich das input-feld automatisch vergrößert, wenn es in den vierstelligen bereich geht. Das aussehen habe ich über ein Stylesheet getätigt, in welchem zwei kleine Pfeilgrafiken als Hintergrund für die &lt;a&gt;-Tags gesetzt werden und &quot;cursor: pointer;&quot; gesetzt wird.Ich hoffe das ist nachvollziehbar[html]&lt;html&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;Beispiel&lt;/title&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/head&gt;&nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot;&gt;&nbsp; &nbsp; function inc(id){&nbsp; &nbsp; &nbsp; &nbsp; old = document.getElementById(id).value;&nbsp; &nbsp; &nbsp; &nbsp; neu = ++old;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(id).value = &quot;&quot;;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(id).value = neu;&nbsp; &nbsp; &nbsp; &nbsp; var s = new String(neu);&nbsp; &nbsp; &nbsp; &nbsp; if(s.length &gt;= 3){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(id).size = s.length - 2;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; function dec(id){&nbsp; &nbsp; &nbsp; &nbsp; old = document.getElementById(id).value;&nbsp; &nbsp; &nbsp; &nbsp; if(old &gt; 0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; neu = --old;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(id).value = &quot;&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(id).value = neu;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var s = new String(neu);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(s.length &gt;= 3){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(id).size = s.length - 2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; &lt;/script&gt;&nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;&lt;/link&gt;&nbsp; &nbsp; &lt;form name=&quot;myForm&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;numberBox&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input id=&quot;0&quot; type=&quot;text&quot; name=&quot;inputFeld&quot; size=&quot;1&quot; value=&quot;0&quot; readonly=&quot;readonly&quot; class=&quot;box&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; onclick=&quot;inc(0)&quot; class=&quot;plus&quot;&gt;&amp;nbsp;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; onclick=&quot;dec(0)&quot; class=&quot;minus&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;numberBox&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input id=&quot;1&quot; type=&quot;text&quot; name=&quot;inputFeld&quot; size=&quot;1&quot; value=&quot;0&quot; readonly=&quot;readonly&quot; class=&quot;box&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; onclick=&quot;inc(1)&quot; class=&quot;plus&quot;&gt;&amp;nbsp;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; onclick=&quot;dec(1)&quot; class=&quot;minus&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;numberBox&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input id=&quot;2&quot; type=&quot;text&quot; name=&quot;inputFeld&quot; size=&quot;1&quot; value=&quot;0&quot; readonly=&quot;readonly&quot; class=&quot;box&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; onclick=&quot;inc(2)&quot; class=&quot;plus&quot;&gt;&amp;nbsp;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; onclick=&quot;dec(2)&quot; class=&quot;minus&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/form&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/html]LGnullnullsix</blockquote>

[QUOTE="nullnullsix, post: 1652770, member: 203275"] [b]AW: [HTML] - Tag um Wert zu erhöhen/verkleinern[/b] SO! Ich bastelte ein wenig unter dem didaktischen Auge von video2brain, und siehe da ich habe das was ich wollte. Ich hätte nicht gedacht, dass das so einfach ist. Das Feld in dem die Zahl angezeigt wird, ist ein einfaches <input>-tag, das auf readonly="readonly" gesetzt wird, und eine id hat über die es, und die attribute wie value und size in den funktionen inc() und dec() angesprochen werden kann. zwei <a>-tags mit onclick="inc(id-des-zugehörigen-input-tags)" und onclick="dec(id)" sorgen für die erhöhung und erniedrigung. Das Erhöhen/Verringern selbst findet in den funktionen inc und dec statt, und ist glaube ich auch für laien im Code gut nachvollziehbar! Als kleinen Schnickschnack habe ich noch eingebaut, dass man nicht weiter als 0 verringern kann, und, dass sich das input-feld automatisch vergrößert, wenn es in den vierstelligen bereich geht. Das aussehen habe ich über ein Stylesheet getätigt, in welchem zwei kleine Pfeilgrafiken als Hintergrund für die <a>-Tags gesetzt werden und "cursor: pointer;" gesetzt wird. Ich hoffe das ist nachvollziehbar [html]<html> <head> <title>Beispiel</title> </head> <body> <script type="text/javascript"> function inc(id){ old = document.getElementById(id).value; neu = ++old; document.getElementById(id).value = ""; document.getElementById(id).value = neu; var s = new String(neu); if(s.length >= 3){ document.getElementById(id).size = s.length - 2; } } function dec(id){ old = document.getElementById(id).value; if(old > 0){ neu = --old; document.getElementById(id).value = ""; document.getElementById(id).value = neu; var s = new String(neu); if(s.length >= 3){ document.getElementById(id).size = s.length - 2; } } } </script> <link rel="stylesheet" type="text/css" href="style.css"></link> <form name="myForm"> <div class="numberBox"> <input id="0" type="text" name="inputFeld" size="1" value="0" readonly="readonly" class="box"> <a href="#" onclick="inc(0)" class="plus"> </a> <a href="#" onclick="dec(0)" class="minus"></a> </div> <div class="numberBox"> <input id="1" type="text" name="inputFeld" size="1" value="0" readonly="readonly" class="box"> <a href="#" onclick="inc(1)" class="plus"> </a> <a href="#" onclick="dec(1)" class="minus"></a> </div> <div class="numberBox"> <input id="2" type="text" name="inputFeld" size="1" value="0" readonly="readonly" class="box"> <a href="#" onclick="inc(2)" class="plus"> </a> <a href="#" onclick="dec(2)" class="minus"></a> </div> </form> </body> </html>[/html]LG nullnullsix[/b] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?