JavaScript - Wie kann man feststellen, ob ein Element leer ist?

Ich mache ein Tic-Tac-Toe-Spiel. Mein Problem ist, dass mein Code erlaubt, X oder O neu zu schreiben, selbst wenn eines der Quadrate bereits X oder O enthält. Ich benutze eine if-Anweisung, um entweder X oder O zu schreiben, abhängig von einer Variablen, die jedes Mal um eins erhöht wird. Ich möchte eine weitere Bedingung hinzufügen, die nur erlaubt, dass X oder O geschrieben wird, wenn mein Tag leer ist. Wie mache ich das?. Hinweis: Bitte nur Javascript, da ich jQuery noch nicht gelernt habe. Vielen Dank im Voraus!JavaScript - Wie kann man feststellen, ob ein Element leer ist?

var tds = document.querySelectorAll("td"); 
var player = 1; 
var str = ""; 

for (var i = 0; i < tds.length; i++) { 
    tds[i].addEventListener("click", function(){ 
    if(player % 2 === 0 && tds[i] !== "<td>X</td>" && tds[i] !== 
    "<td>O</td>"){ 
     this.textContent = "O"; 
    } else if (player % 2 !== 0 && tds[i] === "") { 
     this.textContent = "X"; 
    } 
    player++; 

    }); 
}

HTML -

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css.css"> 
    <title></title> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
    </table> 
    <script type="text/javascript" src="js.js"> 

    </script> 
    </body> 
</html>

Quelle

2017-11-23 DannyArcher

Code Hinweis hat eine Reihe von syntaktischen und semantischen Fehlern - bitte funktionierenden Code zu schreiben versuchen. Beachten Sie auch, dass Sie 'this.textContent.length === 0' auch tun können, wenn Sie' this.textContent = "X"; '(nicht sicher, was das' This 'sein soll) machen. –

könnten Sie überprüfen gerade die childNodes Eigenschaft eines Elements, das ein Nodelist zurückgibt.

Wenn die Länge 0 ist, ist Ihr Element leer.

const elem = document.querySelector("#container") 
 
console.log(elem.childNodes.length)

<div id="container"></div>

Sorgfältige als Zeilenumbrüche zählen als text though.

Quelle

2017-11-23 04:58:25

Vielen Dank! – DannyArcher

Sie können die innerHTML Eigenschaft Ihrer Elemente überprüfen, ob sie irgendetwas enthalten - in Ihrem Fall X oder O.

So sollte der Zustand so aussehen.

Quelle

2017-11-23 05:02:19

Es tut mir leid, aber das funktioniert nicht. Danke trotzdem! – DannyArcher

Möglicherweise gibt es weitere Fehler in Ihrem Code. Dies ist jedoch eine Möglichkeit, den Inhalt eines DOM-Elements zu überprüfen. –

Sie können die Eigenschaft innerHtml verwenden, um zu prüfen, ob ein Element etwas enthält. Aber ich würde vorziehen, Klasse marked hinzuzufügen, wenn Sie die HTML X or O einstellen. Dann überprüfen Sie in Ihrem js, ob das Element die Klasse marked hat. hinzufügen Klasse auf Click-Ereignis von td mit:

function mark(e) 
{ 
var isMarked = hasClass(e,"marked"); 
if(!isMarked) 
{ 
e.className+= " marked"; 
//add X or O 
} 
else 
{ 
//do something else 
} 
function hasClass(element, className) { 
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className); 
}

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css.css"> 
    <title></title> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td onclick="mark(this)"></td> 
     . 
     . 
     <td></td> 
     </tr> 
    </table> 
    <script type="text/javascript" src="js.js"> 

    </script> 
    </body> 
</html>

HasClass Referenz: http://sonnyt.com/blog/development/javascript-check-if-element-has-class

Quelle

2017-11-23 05:29:10 MUT

bitte Arbeitslösung unten finden.

var player = 1; 
 
var blocks = document.querySelectorAll('td'); 
 
var title = document.getElementById('title'); 
 

 
function switchPlayer(currentPlayer) { 
 
    if (currentPlayer === 1) { 
 
    player = 2; 
 
    title.innerHTML = 'Player: 2(O)' 
 
    } else { 
 
    player = 1; 
 
    title.innerHTML = 'Player: 1(X)' 
 
    } 
 
} 
 

 
blocks.forEach(function(block) { 
 
    block.addEventListener('click', function() { 
 
    if (!block.innerHTML) { 
 
     if (player === 1) { 
 
     block.innerHTML = 'X'; 
 
     } else { 
 
     block.innerHTML = 'O'; 
 
     } 
 
     switchPlayer(player) 
 
    } 
 
    }) 
 
});

td { 
 
    border: 1px solid black; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<h1 id="title"> 
 
Player: 1 (X) 
 
</h1> 
 
<table> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

Quelle

2017-11-23 06:21:15

JavaScript - Wie kann man feststellen, ob ein Element leer ist?

Antwort

Verwandte Themen