堆栈内存溢出
  繁体   English   中英

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

[英]How to remove the last child from a certain div of a div

 原文  2022-10-23 15:16:11  5   1    javascript/ nodes/ removechild/ nim-game

问题描述

我正在为我的一个班级分配的项目爬行最后一步。 基本上，我必须仅使用 HTML/CCS/JavaScript 在 NIM 游戏的 web 上创建一个实现。 明天是最后期限，我几乎完成了，我只是在我希望 AI 从一堆元素中删除一定数量的元素时出错，它只是说我指的那堆是未定义的，即使我调试它似乎具有正确信息的代码。 游戏板是根据宽度变量（w）动态生成的，它是在游戏开始时在 function 中创建的。

我将摘录整个项目，但基本上我会强调创建板的功能（完美运行）以及我在删除元素时遇到的一些问题。 在此先感谢您提供的任何可能的帮助，这是我的第一个前端项目经验，我很累，不知道该怎么做......

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>

1 个解决方案

解决方案1
 0  2022-10-23 18:20:18

尝试更换

        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 返回 HTMLCollection。 HTMLCollection 中没有 removeChild 方法。

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection

保持代码一致 - 命名占编码的 80%（游戏和 msz），10% 是一致性（winCheck 和 ai_move）。 API 文档中描述了 rest；）

做得好！

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何检查div是来自父div的最后一个孩子 如何从div中删除最后一个元素？ 如何从div中删除子元素 从div中删除某些文本 如何删除div中的最后3个div 如果子div包含某个数据属性，则删除父div 如何删除某个div下的某个类 Javascript：如何从div或字符串中删除最后一个字符？ 如何使用for循环从parentnode中删除子（html div） 如何使用 jquery 或普通 JS 从 div 中删除子元素
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM