ändern innerHTML- von geklickt Element Javascript

Question

Ich habe 4 Karten und ich möchte den Text seines Element auf Klick ändern, unten ist mein html:

<tr> 
     <td class="card">down</td> 
     <td class="card">down</td> 
    </tr> 
    <tr> 
     <td class="card">down</td> 
     <td class="card">down</td> 
    </tr> 

Also, wenn ich den Text auf jeder Karte klicken sollte auf sein und andere sollten unten sein. Ich bin in der Lage, den Text der angeklickten Karte zu ändern, aber wie kann ich den Wert der anderen Karten nach unten ändern? Unten ist mein JS

var cards = document.getElementsByClassName('card'); 

      for (var i = 0; i < cards.length; i++) { 
       cards[i].onclick = function(target) { 
        this.innerHTML = 'up'; 
       } 
      } 

Answer 1

Sie können es gerne tun:

var cards = document.getElementsByClassName('card'); 
for (var i = 0; i < cards.length; i++) { 
    cards[i].onclick = function(target) { 
    // Turn the 'cards' into an array and loop over it. 
    [].forEach.call(cards, function(card) { 
     card.innerHTML = "down" 
    }); 
    this.innerHTML = "up"; 
    } 
} 

Diese Schleife wird über alle Karten und ihre Werte zu "down" zurückzukehren.

Fiddle

Demo unter

var cards = document.getElementsByClassName('card'); 
 
for (var i = 0; i < cards.length; i++) { 
 
    cards[i].onclick = function(target) { 
 
    [].forEach.call(cards, function(card) { 
 
     card.innerHTML = "down" 
 
    }); 
 
    this.innerHTML = "up"; 
 
    } 
 
}

<table> 
 

 
    <tr> 
 
    <td class="card">down</td> 
 
    <td class="card">down</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="card">down</td> 
 
    <td class="card">down</td> 
 
    </tr> 
 
</table>

Answer 2

Sie können alle Karten ausschlagen und stellen Sie dann this Karte bis OR
Sie konnte creat e eine Variable, die die letzte Karte speichert, auf die geklickt wurde, und dann nur diese Karte und die angeklickte.
Auf diese Weise müssen Sie keine Schleife im Ereignishandler verwenden.

var cards = document.getElementsByClassName('card'); 
var k; 

      for (var i = 0; i < cards.length; i++) { 
       cards[i].onclick = function(target) { 
        if(k) { 
         k.innerHTML='down'; 
        } 
        this.innerHTML='up'; 
        k=this; 
       } 
      }