Ich habe eine Schaltfläche ist es möglich, es verschwinden zu lassen, wenn ich es sage sagen 5 mal? Ich muss für ein kleines Projekt wissen, an dem ich arbeite! jede Antwort ist willkommen!Wie mache ich eine Schaltfläche verschwinden nach einer bestimmten Anzahl von Klicks
Weisen Sie id Ihrem Knopf zu.
<Button id='myButton' onclick="myFunction()">
Auf jeder Schaltfläche anklickt, halten Sie den Zähler erhöhen (ich denke, Sie wissen, wie es zu tun)
Nachdem der Zähler erreicht ist, document.getElementById("Your_button_id_here").style.visibility = "hidden";
<script>
var counter=0;
function myFunction() {
//increment counter
counter+=1;
if(counter>4)
document.getElementById("Your_button_id_here").style.visibility = "hidden"
}
</script>
Aber ich denke, Deaktivieren wäre passender: document.getElementById("Your_button_id_here").disabled=true
Wie bekomme ich es, den Zähler per Knopfdruck zu erhöhen? Es tut mir leid, immer noch JavaScript zu lernen. –
Es funktioniert, danke! –
Sie könnten ein einfaches Skript wie folgt haben :
var nbClicks=0;
function btnOnClick(btn){
if(++nbClicks>5){btn.style.display='none';}
}
Und es so verwenden: < input type = "button" Onclick = "btnOnClick (this)" value = "Klick mich 6 mal!" >
Bei jedem Klick erhöhen Sie einfach den Wert einer Variablen und nachdem Sie die gewünschte Zahl erhalten haben, verstecken Sie sie mit css und js.
machte ich ein kleines Beispiel mit jQuery
var count = 0;
$("#b1").click(function() {
count++;
if (count >= 5) {
$("#b1").hide();
}
});<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</header>
<body>
<button id="b1">5 Clicks</button>
</body>
</html>Verwenden Sie diesen Code
HTML:
<button type='button' id='button_test_clicks'>
Click me!
</button>
JavaScript:
(function(){
var counter=0; // counter clicks initialization
var button=document.getElementById('button_test_clicks'); //Our button
button.addEventListener("click",function(){ //add a click event to button
counter++; //incement the counter
console.log(a);
if(counter==5){
button.style.display = 'none'; //hide if the clicks reached to 5
}
});
})();
Aber immer wenn die Seitenaktualisierung geschieht Zähler setzt auf Null, um Refresh-Probleme zu vermeiden lernen Sie über localStorage in Javascript.
Ja, das wäre mit etwas JavaScript ziemlich trivial. Ein Ansatz wäre, einen Zähler zu dekrementieren, wenn die Schaltfläche angeklickt wird, und wenn er Null erreicht, die Schaltfläche zu deaktivieren/auszublenden. Eine Bibliothek wie jQuery könnte die Arbeit erleichtern. –