Funktion abbrechen


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>
 

basti1012

Erfahrenes Mitglied
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)
 

xdxd

Grünschnabel
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>
 

basti1012

Erfahrenes Mitglied
Und fast alle anderen Variablen mit let können auch const werden.
Da frage ich mich ab und zu auch wann let,const, oder wahr die richtige wahl ist.
dass du statt einer Magic Number Kodierung mittels 1 und 2 auf soetwas wie ein Enum setzt
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
 

xdxd

Grünschnabel
Danke für deine Hilfe.
Muss ich die Funktion "weiter(was)" nicht auch noch mit zähler2 und zähler3 erneut schreiben?:unsure:
 

xdxd

Grünschnabel
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);
})
 

basti1012

Erfahrenes Mitglied
Du machst das etwas kompliziert.
In diesen Fall gebe es mehrere Wege die zum Ziel führen.
Meiner wäre der
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:

xdxd

Grünschnabel
Eine Frage habe ich noch.
Wenn ich jetzt zu jedem der ausgegebenen Werte ein Prozent schreiben will, wie mache ich das?
Ich habe es schon mit output.innerHTML=z "%"; versucht, klappt aber nicht.:unsure:
Im <p id="ausgang">0 %<p/> habe ich es schon geändert.