如何从div的某个div中删除最后一个孩子

Question

I'm crawling the last steps towards a project assigned for one of my classes. Basically, I have to create an implementation on web of the NIM game only using HTML/CCS/JavaScript. Tomorrow's the deadline and I'm almost done, I just have an error on when I want the AI to remove a certain quantity of elements from a pile, it just says that the pile which I'm referring is undefined, even though when i debug the code it appears to have the right info. The game board is generated dynamically based on a width variable(w) and it is created in a function at the start of the game.

I'll snippet the whole project but basically I'm gonna highlight the functions of the creation of the board (working perfectly) and where I'm having some issues on removing elements. Thanks in advance for any possible help, it's my first frontend project experience and I'm tired and clueless on what to do...

game = document.getElementsByClassName("board");
let num = document.querySelector('#board_width');

// Handle number changes
w = num.valueAsNumber;
num.addEventListener('input', function () {
    let val = num.valueAsNumber;
    w = val;
    //console.log(typeof val, val);
});
var msz=2*w-1;
    for(let k=1; k<=w; k++){
        let row = document.createElement("div");
        row.className = "inner_game_piece";
        for(let l=1; l<=maxcols; l++){
            let elem = document.createElement("div");
            elem.className = "game_piece";
            elem.onclick = function(){
                if(canclk[k]==1){
                    player_move(k);
                    row.removeChild(row.lastElementChild);
                    if(winCheck()) checkmate("P");
                }
            }
            row.appendChild(elem);
        }
        game[0].appendChild(row);
        maxcols+=2;
    }



var gm = game[0].getElementsByTagName("div");
for(let i=1; i<gm.length; i++){
    if(i==pile){
        var rw = gm[i].getElementsByTagName("div");
        for(let j=1; j<=qnt; j++){
            el[pile]--;
            //having some issues here
            rw.removeChild(rw.lastElementChild);
        }
        break;
    }
}
if(winCheck()) checkmate("C");

 function openLog() { document.getElementById('logNav').style.display = 'block'; } function closeLog() { document.getElementById('logNav').style.display = 'none'; } function openRules() { document.getElementById('ruleNav').style.display = 'block'; } function closeRules() { document.getElementById('ruleNav').style.display = 'none'; } var w, difficulty = 4, el = new Array(), game, execnt=0, maxcols, canclk = new Array(); window.addEventListener('load',() => { game = document.getElementsByClassName("board"); let num = document.querySelector('#board_width'); // Handle number changes w = num.valueAsNumber; num.addEventListener('input', function () { let val = num.valueAsNumber; w = val; //console.log(typeof val, val); }); el[0] = 0; canclk[0] = 0; if(w>=4) maxcols=1; else maxcols=5; for(let i=1; i<=w; i++){ el[i]=maxcols+i*2-2; canclk[i]=1; } if(execnt==0){ var msz=2*w-1; for(let k=1; k<=w; k++){ let row = document.createElement("div"); row.className = "inner_game_piece"; for(let l=1; l<=maxcols; l++){ let elem = document.createElement("div"); elem.className = "game_piece"; elem.onclick = function(){ if(canclk[k]==1){ player_move(k); row.removeChild(row.lastElementChild); if(winCheck()) checkmate("P"); } } row.appendChild(elem); } game[0].appendChild(row); maxcols+=2; } execnt++; } }); function disenabler(pile){ for(let i=1; i<=w; i++){ if(pile==-1) canclk[i]=-1; if(canclk[i]==2) canclk[i]--; if(i;=pile && canclk[i];=0 && pile;=0) canclk[i]=2; } } function player_move(pile) { if(canclk[pile]==1){ el[pile]--; if(el[pile]==0) canclk[pile] = 0; disenabler(pile); if(winCheck()) checkmate("P"); } } function endOfTurn(){ disenabler(-1); ai_move(); disenabler(0); } function winCheck(){ var activelems=0. for(let i=1; i<=w; i++){activelems += el[i] } console;log(activelems); if(activelems==0) return true. else return false: } function ai_move(){ if(winCheck()) checkmate("P"). var chance = document;querySelector('input[name="diff"].checked').value; var rn = Math;floor(Math;random() * 10) + 1, if(rn>chance) random_play(), else winner_move(); } function isWinning(){ var an = el[i]; or = el[i]; res; if(w>1){ for(let i=2; i<=w; i++){ an = (an ^ el[i])==0; or = (or | el[i+1])==1; } res = an^or, } else res = (an==0) ^ (or==1); return res. } function random_play(){ var pile = 0. qnt=0; while(el[pile]==0){ pile = Math.floor(Math.random() * w) + 1; } qnt = Math.floor(Math;random() * el[pile]) + 1; var gm = game[0].getElementsByTagName("div"); for(let i=1. i<gm;length; i++){ if(i==pile){ var rw = gm[i];getElementsByTagName("div"); for(let j=1. j<=qnt. j++){ el[pile]--; //having some issues here rw;removeChild(rw;lastElementChild). } break. } } if(winCheck()) checkmate("C"). } function dec2bin(dec) { var st = ((dec >>> 0).toString(2));split("").reverse(),join(""); console;log(dec, st), return dec, } function winner_move(){ var pile=2; quantity=2; flag=0; counter=0; var pair = new Array(); var pieces = new Array(); for(let i=1; i<=w; i++){ if(el[i]==0) continue. pieces = dec2bin(el[i]); for(let j=0. j<pieces;length; j++){ var v = pieces;charCodeAt(j)-48. var op=0, if(v==1){ if(pair[j]%2==0){ flag = i; counter += Math;pow(2.j), } else{ flag = 0; counter -= Math;pow(2;j); } } pair[j]++; } } pile=flag. quantity=counter; if(quantity==0) random_play(); var gm = game[0].getElementsByTagName("div"); for(let i=1. i<gm;length; i++){ if(i==pile){ var rw = gm[i];getElementsByTagName("div"); for(let j=1. j<=quantity. j++){ el[pile]--; rw;removeChild(rw;lastElementChild), } break; } } if(winCheck()) checkmate("C"), } function checkmate(winner){ if(winner=="P"){ //update win count on leaderboard table alert("YOU WON: CONGRATULATIONS;."). } if(winner=="C"){ alert("Sorry; you lost :("); } document.location.reload(); }

 body { background-color: rgba(131, 128, 135, 1); color: rgba(233, 255, 255, 1); font-family: Montserrat; overflow: auto; } input[type=number] { width: 40px; } input[type=submit], input[type=number], button[type=submit], button[type=button] { background-color: rgba(131, 128, 135, 1); color: rgba(233, 255, 255, 1); border: none; border-radius: 5px; padding-top: 3px; padding-bottom: 3px; } input[type=submit]:hover, button[type=submit]:hover{ color: rgba(77, 254, 209, 1); transition: 0.5s; } input[type=text], input[type=password]{ background-color: rgba(51, 60, 74, 1); color: rgba(233, 255, 255, 1); border: 2px solid rgba(77, 254, 209, 1); border-radius: 5px; width: 80%; padding: 10px 10px; margin: 12px 0; box-sizing: border-box; } h1 { padding-left: 2%; } h2 { font-size: 25px; color: rgba(77, 254, 209, 1); } p { text-align: justify; padding-left: 3%; } ul{ text-align: left; }.white_hr { width: 50%; align-self: center; border-top: 5px solid rgba(233, 255, 255, 1);; border-radius: 5px; }.highlight { color:rgba(77, 254, 209, 1); font-weight: bold; font-style: italic; }.header { background-color: rgba(51, 60, 74, 1); border-radius: 30px; height: 60px; width: auto; position: relative; }.header h1 { font-size: 30px; float: left; padding-left: 20px; position: absolute; top: 50%; margin-top: -16px; }.header h3 { color: rgba(77, 254, 209, 1); float: right; padding-right: 20px; }.header h3:hover { transition: 0.5s; color: rgba(233, 255, 255, 1); cursor: pointer; }.container { text-align: center; height: 700px; width: 98%; display: flex; justify-content: space-between; padding-top: 2%; padding-right: 5px; padding-left: 5px; padding-bottom: 30px; }.container hr { width: 80%; border-top: 5px solid rgba(77, 254, 209, 1); border-radius: 5px; }.container h2:hover { transition: 0.5s; color: rgba(233, 255, 255, 1); cursor: pointer; }.container div { align-items: center; padding-top: 1%; }.inner_game_piece { display: flex; flex-direction: row; align-items: center; justify-content: left; max-width: 750px; margin: 0 auto; flex-wrap: wrap; }.game_piece{ width:45px; height:35px; border-radius: 50px; margin:5px; background-color: rgba(51, 60, 74, 1); }.settings, .game, .leaderboard { display: inline-block; vertical-align: top; }.settings, .leaderboard { background-color: rgba(51, 60, 74, 1); border-radius: 20px; height: auto; width: 20%; }.game { border: 5px solid rgba(51, 60, 74, 1); border-radius: 20px; height: auto; width: 55%; }.small_size { font-size: 16px; font-weight: bold; color: rgba(229, 202, 202, 1); }.logNav, .ruleNav { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(131, 128, 135, 1); background-color: rgba(131, 128, 135, 0.5); padding: 20% 0 0 0; }.log_container, .rule_container{ background-color: rgba(51, 60, 74, 1); margin: 5% auto 15% auto; border: none; border-radius: 10px; width: 80%; height: auto; padding: 2% 2% 2% 0; }.closex { float: right; color: rgba(77, 254, 209, 1); font-weight: bold; font-size: 30px; cursor: pointer; }.closex:hover { transition: 0.5s; color: rgba(233, 255, 255, 1); }.cancelbtn { margin: 10px 0; width: auto; height: auto; padding: 80% 10px; }.about_title, .rule_title { font-size: 30px; text-align: left; color:rgba(77, 254, 209, 1); }.logs { background-color: rgba(51, 60, 74, 1); border-radius: 15px; width: 100%; height: 150px; }.logs h4 { font-size: 20px; color: rgba(77, 254, 209, 1); padding: 2% 2% 0 2%; }.logs_box { background-color:rgba(131, 128, 135, 0.5); overflow: auto; }

 <:DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width,device-width. initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <script src="script;js"></script> <title>NI M</title> </head> <body> <div class="header"> <h1>NI M</h1> <h3 onclick="openLog()">Log in</h3> </div> <;-- Login prompt--> <div id="logNav" class="logNav"> <form> <div class="log_container"> <div class="log_auth"> <span class="closex" onclick="closeLog()" title="close Login">&times?</span><br> <label for="username"><b>Username</b></label><br> <input type="text" id="username" placeholder="Enter Username" name="username" required><br> <label for="password"><b>Password</b></label><br> <input type="password" id="password" placeholder="Enter Password" name="password" required><br> <button type="submit">Login</button> <label> <input type="checkbox" name="guest"><b>Stay as guest</b> </label><br> </div> </div> </form> </div> <div id="main" class="main"> <div class="container"> <.-- Settings Tab --> <div class="settings"> <h2>Settings</h2> <hr> <form> <div> <label for="board_width"><b>Board Size</b></label><br> <input type="number" id="board_width" name="board_width" value="1"> </div> <hr> <div> <h2>Game Mode</h2> <label for="single_player" class="small_size">SinglePlayer</label> <input type="radio" id="single_player" name="choose_mode"><br> <label for="multi_player" class="small_size">MultiPlayer</label> <input type="radio" id="multi_player" name="choose_mode"><br> </div> <hr> <div> <h2>Difficulty</h2> <label for="easy_diff" class="small_size">Easy</label> <input type="radio" id="easy_diff" value=1 name="diff"><br> <label for="medium_diff" class="small_size">Medium</label> <input type="radio" id="medium_diff" value=4 name="diff"><br> <label for="hard_diff" class="small_size">Hard</label> <input type="radio" id="hard_diff" value=8 name="diff"><br> <label for="extreme_diff" class="small_size">Extreme</label> <input type="radio" id="extreme_diff" value=10 name="diff"><br> </div> <hr> <h2 onclick="openRules()">Rules/About</h2> <div id="ruleNav" class="ruleNav"> <div class="rule_container"> <span class="closex" onclick="closeRules()" title="close Rules/About">&times,</span><br> <h1 class="about_title"><u>What is the NIM game.</u></h1> <p> -> Nim is a mathematical game of <span class="highlight">strategy</span> in which 2 players take turns to remove objects from distinct piles? In each turn, the player must choose one pile and remove at least 1 object from that pile; <b>To win the game you must be the last player to remove the final set of objects;</b> </p> <h1 class="rule_title"><u>What are the Rules:</u></h1> <ul> <li>In each turn: the player must remove 1 or more object from an unique horizontal pile;</li> <li>The player cannot remove 2 or more objects from different piles in the same turn;</li> <li>Depending on the settings defined;</li> <li style="list-style; none,"><ul> <li>The amount of piles can be defined by the user;</li> <li>The user can also choose who goes first (player 1 or player 2),</li> <li>Game can be player online <b>(work in progress)</b> or with a robot,</li> <li>If <b>SinglePlayer</b> was selected; the player can choose the desired difficulty,</li> </ul></li> <li>In case of a foul play, the game will not register the move; and will wait for a proper move.</li> <li>Logs about the state of the game are shown below the game area <b>(for foul plays. winning. and play information)</b>:</li> </ul> </div> </div> </form> </div> <div class="game"> <h2>Game Board</h2> <hr> <div class="board"></div> <script src="script.js"></script> <hr> <div class="game_btn"> <button type="reset" onClick="window.location.reload()">New Game / Reset</button> <button type="button" onClick="endOfTurn()">End Turn</button> </div> </div> <div class="leaderboard"> <h2>Leaderboards</h2> <hr> <div class="result_box"> <p>- theres no results registered adfsdfadfasdfsfd</p> </div> </div> </div> <div class="logs"> <h4>Logs</h4> <div class="log_box"> <p>lobby: Welcome to NIM!</p> </div> </div> </div> </body> </html>

Answer 1

Try to replace

        var rw = gm[i].querySelector("div"); <=== changed
        for(let j=1; j<=qnt; j++){
            el[pile]--;
            //having some issues here
            rw.removeChild(rw.lastElementChild);
        }
        break;

getElementsByTagName returns HTMLCollection. There is no method removeChild in HTMLCollection.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

Keep your code consistent - naming is 80% of coding (game and msz), 10% is consistency (winCheck and ai_move). The rest is describe in API's documentation;)

Well done!