Funktion abbrechen

X

xdxd

Grünschnabel
Hallo Leute,:)

Wenn die Variable "Button" = 100 ist, sollen die Funktionen ButtonPush und ButtonPush2 pausiert werden.
Außerdem soll die Variable nicht ins Negative rutschen.
Wie mache ich das am besten (if-Anweisung) ?:unsure:
Danke für eure Antworten:giggle:

Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

 <link href="style3.css" type="text/css" rel="stylesheet">
</head>
<body>

<button class="Button" onclick="ButtonPush()">Button</button>

<button class ="Button2" onclick="ButtonPush2()">- Button</button>

 <p id="Button3"><font size="3">0</font></p>

 <script> 

let Button = 0;

let output = document.getElementById("Button3");

function ButtonPush(){

    Button += 10;

    output.innerText = Button;

    }

function ButtonPush2(){

    Button -= 10;

    output.innerText = Button;


</script>
</body>
</html>
 
Da gibt es viele möglichkeiten.
If Abfragen wäre auch meine erste Idee.
So ungefähr
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link href="style3.css" type="text/css" rel="stylesheet">
</head>
<body>
<button class="Button" id="plus">Button +</button>
<button class ="Button2" id="minus">Button -</button>
<p id="gesamt">0</p>
<script>
let zahler=0;
let max=100;
let min=0;
let hoch=10;
var output = document.getElementById("gesamt");
document.getElementById('plus').addEventListener('click',function(){
  weiter(1);
})
document.getElementById('minus').addEventListener('click',function(){
  weiter(2);
})  
function weiter(was){
     g=was==1 ? 1 : 2;
     if(g==1){
         zahler+=hoch;
     }else{
         zahler-=hoch;
     }
     if(zahler>max){
         zahler=max;
     }  
     if(zahler<min){
         zahler=min;
     }    
     output.innerText =zahler;
}
</script>
</body>
</html>

Das hier
Code: 
<font size="3">0</font>
sind alte Elemente die nicht mehr benutzt werden.Das wird heute in der Css angegeben ( font-size:16px)
 
Ich habe dem Code noch vier Buttons mit der selben Funktion hinzugefügt, jedoch geht nur der Erste...:rolleyes:
Nach einer Stunde Fehlersuche verzweifle ich so langsam.
Könnt ihr mit Helfen?:)

<button class="Button" id="plus">Button +</button> <button class ="Button2" id="minus">Button -</button> <button class ="Button" id="plus">Button +</button> <button class ="Button2" id="minus">Button -</button> <button class ="Button" id="plus">Button +</button> <button class= "Button2" id="minus">Button -</button> <p id="Button1">0</p> <p id="Button2">0</p> <p id="Button3">0</p> <script> let zahler=0; let zahler2=0; let zahler3=0; let max=100; let min=0; let hoch=10; var output = document.getElementById("Button1"); var output2 = document.getElementById("Button2"); var output3 = document.getElementById("Button3"); document.getElementById('plus').addEventListener('click',function(){ weiter(1); }) document.getElementById('minus').addEventListener('click',function(){ weiter(2); }) function weiter(was){ const g=was==1 ? 1 : 2; if(g==1){ zahler+=hoch; }else{ zahler-=hoch; } if(zahler>max){ zahler=max; } if(zahler<min){ zahler=min; } output.innerText =zahler; output2.innerText =zahler2; output3.innerText =zahler3; } </script> </body> </html>
 
ComFreek hat gesagt.:
Und fast alle anderen Variablen mit let können auch const werden.
Zum Vergrößern anklicken....
Da frage ich mich ab und zu auch wann let,const, oder wahr die richtige wahl ist.
ComFreek hat gesagt.:
dass du statt einer Magic Number Kodierung mittels 1 und 2 auf soetwas wie ein Enum setzt
Zum Vergrößern anklicken....
Kannst du mir da mal ein Beispiel geben wie du das meinst ?

@xdxd
Du darfst id's nur einmal verwenden auf einer Seite.
Du benutzt die id "plus" und "minus" öffters.
Ändere das erst mal alles in verschiedene id's oder benutze document.querySelector und gebe den Buttons eine Klasse
 
Danke für deine Hilfe.
Muss ich die Funktion "weiter(was)" nicht auch noch mit zähler2 und zähler3 erneut schreiben?:unsure:
 
Ich habe jetzt bei jedem Button die ID gewechselt und kann jetzt mit allen Buttons die Variable Button1 ändern.

<button class="Button" id="plus">Button +</button> <button class ="Button2" id="minus">Button -</button> <button class ="Button" id="plus2">Button +</button> <button class ="Button2" id="minus2">Button -</button> <button class ="Button" id="plus3">Button +</button> <button class= "Button2" id="minus3">Button -</button> document.getElementById('plus').addEventListener('click',function(){ weiter(1); }) document.getElementById('minus').addEventListener('click',function(){ weiter(2); }) document.getElementById("minus2").addEventListener("click",function(){ weiter(2); }) document.getElementById("minus3").addEventListener("click",function(){ weiter(2); }) document.getElementById("plus2").addEventListener("click",function(){ weiter(1); }) document.getElementById("plus3").addEventListener("click",function(){ weiter(1); })
 
Du machst das etwas kompliziert.
In diesen Fall gebe es mehrere Wege die zum Ziel führen.
Meiner wäre der

Link zur Lösung

So kannst du jetzt auch einfach noch mehr Buttons hinzufügen ohne den JS Code anpassen zu müßen
Vieleicht schreibt wer anders noch ein anderen Weg
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück