Ist es möglich, eine Taste zu deaktivieren, nachdem sie 5 Mal geklickt wurde?

Nachdem ein Benutzer fünf Mal auf die Schaltfläche geklickt hat, möchte ich, dass die Schaltfläche deaktiviert wird.Ist es möglich, eine Taste zu deaktivieren, nachdem sie 5 Mal geklickt wurde?

Ist es möglich, nur in HTML zu tun, oder müsste ich Javascript verwenden?

Quelle

2017-06-18 Riz-waan

Es ist in der Tat möglich, die Indizes aller Werte> 5 zu erhalten. Aber in Ihrem Fall könnte es eine alternative Lösung geben. Wo ändern Sie die Array-Werte? Sie könnten eine Setter-Methode einführen, die einen Array-Wert an einem bestimmten Index ändert und gleichzeitig die entsprechende Schaltfläche bei Wert> 5 deaktiviert. –

Als Erstes können Sie jedem Knopf ein data-clicks Attribut geben. enthält die Anzahl der Klicks für diese Schaltfläche.

Jedes Mal, wenn der Benutzer auf eine Schaltfläche klickt, überprüfen Sie data-clicks Attributwert, wenn es gleich 5 ist. Deaktivieren Sie dann die Schaltfläche. sonst erhöhen nur die in data-clicks

Beispiel gespeicherte Nummer

können Sie nur 5-mal für jede Schaltfläche klicken, danach auf die Schaltfläche

let btns = document.querySelectorAll(".my-btn"), btn = null; 
 

 
for (let i = 0; i < btns.length; i += 1) { 
 
    btns[i].onclick = function() { 
 
    
 
     this.setAttribute('data-clicks', Number(this.getAttribute('data-clicks')) + 1) 
 
     
 
     if (this.getAttribute('data-clicks') === '5') { 
 
      this.setAttribute('disabled', 'disabled'); 
 
     } 
 
    } 
 
}

<input type="button" class="my-btn" value="button 1" data-clicks="0"> 
 
<input type="button" class="my-btn" value="button 2" data-clicks="0"> 
 
<input type="button" class="my-btn" value="button 3" data-clicks="0"> 
 
<input type="button" class="my-btn" value="button 4" data-clicks="0"> 
 
<input type="button" class="my-btn" value="button 5" data-clicks="0">

deaktiviert werden

Ich habe das Array entfernt, weil es nicht nötig ist. auch ohne es wird dynamisch mit Ihren HTML-Buttons arbeiten. Sie können ganz einfach Tasten Code ohne Änderungen für Ihre JavaScript

UPDATE

für Ihren jsfiddle Sie meinen Code in Ihre myno Funktion wie diese einbetten können https://jsfiddle.net/bhoLbu8x/5/

Quelle

2017-06-18 14:59:47

Ist dies:

anstelle von Schaltflächen setze ich 1, 2,3,4 weil die Schaltflächen werden automatisch in diesem Format erstellt

? –

@raakobihai Ich aktualisierte es, um den Index anstelle des Wertes zu nehmen. Ihr Vertrauen ist mir nicht klar. –

OK, also habe ich einen Code in js, der jedes Mal ein Textfeld erstellt, wenn eine Person eine Taste drückt. Es gibt nichts Einzigartiges in der Schaltfläche Label/Name Alle Schaltflächen sind gleich. Aber in der Button-ID wird von 1 aus erhöht. Also zum Beispiel und so weiter. Jedes Mal, wenn ein Textfeld mit einem Klick auf eine Schaltfläche erstellt wird, möchte ich den Wert der entsprechenden Position des Arrays erhöhen. Also meine Schaltfläche ID = die Platzierung im Array. Würde das noch funktionieren? –

Hoffnung, das gibt Ihnen eine Vorstellung entfernen oder hinzufügen :

var h = [2, 4, 6, 3, 4, 2, 7]; 
var button = document.getElementsByTagName('button'); 
var placementOfValueReaches5 = []; 

h.forEach(function(value, index){ 
    if (value >= 5){ 
     button[index].setAttribute('disabled', true); 
     placementOfValueReaches5.push(index); 
    } 
}); 

console.log(placementOfValueReaches5); // outputs [2, 6]

Weitere Informationen Array.prototype.forEachhere.

Quelle

2017-06-18 15:15:13

Deaktiviert dies auch die Schaltfläche? –

ja. Die Zeile 'button [index] .setAttribute ('disabled', true)' deaktiviert die Schaltfläche. –

Ihre Bearbeitung der Frage hat die Frage und die entsprechende Lösung komplett geändert –

Ist es möglich, eine Taste zu deaktivieren, nachdem sie 5 Mal geklickt wurde?

Antwort

Verwandte Themen