猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

什么原因会使 html select 标签卡住？

我用 HTML、CSS 和 JS 构建了一个二进制棋盘游戏，然后添加了一个选择标签，该标签将更改棋盘的级别，这意味着它将在表中添加/删除行和列

问题是选择标签被卡住意味着它不会删除选项标签列表

我不明白为什么它被卡住，所以我删除了

1 个<label></label>标签

2 <select id="levels" onchange="changeLevel()">id & onchange 属性

3<option value="5" selected > Easy </option>取值及选择属性

但它仍然卡住了

我在谷歌上发现一些内容说我的CSS代码可能会影响它我检查了它并且它没有受到CSS代码的影响

我无法预料为什么会发生这种情况，我之前确实多次使用了 select 标签，但我不明白为什么会发生这种情况


慕尼黑5688855
浏览 80回答 2
2回答

杨魅力

在这里删除 onmousedown 部分<body onmousedown='return false'>
0

料青山看我应如是

如果你改变：<body onmousedown='return false'>到：<body onkeydown='return false'>它应该有效！///////////////////// DOC variables /////////////////////let table = document.querySelector(".table-block");let buttons= document.querySelectorAll(".node");buttons.forEach(button => button.addEventListener("click", trueOrFalse));let goals = document.querySelectorAll(".goal");let scoreDsipaly = document.querySelector("#score");let dispalaySeconds = document.querySelector("#seconds");//////////////////////// global variables ////////////////////////// let roundTime = 20+1;let roundTime =20000;let rowLength = table.rows.length -1;let colLength= table.rows.item(0).cells.length-1;// added for clarity's sakelet rowGoal=rowLength;let colGoal=colLength;let score=0;///////////////// functions //&nbsp;///////////////function init(){&nbsp; &nbsp; resetVals();&nbsp; &nbsp; rowsGoalsGenerater();&nbsp; &nbsp; colsGoalsGenerater();}function resetVals() {&nbsp; &nbsp; //roundTime = 20+1;&nbsp; &nbsp; roundTime=20000;&nbsp; &nbsp; for (let button = 0; button < buttons.length; button++) {&nbsp; &nbsp; &nbsp; &nbsp; buttons[button].classList.remove("node-true");&nbsp; &nbsp; &nbsp; &nbsp; buttons[button].innerHTML = 0;&nbsp; &nbsp; }&nbsp; &nbsp; for (let goal = 0; goal < goals.length; goal++) {&nbsp; &nbsp; &nbsp; &nbsp; goals[goal].classList.remove("goal-achived");&nbsp; &nbsp; }}// turns the value of a node 1/0 or true/ falsefunction trueOrFalse(){&nbsp; &nbsp; let row = this.parentElement.rowIndex;&nbsp; &nbsp; let col= this.cellIndex;&nbsp; &nbsp; let val= this.innerHTML;&nbsp; &nbsp; if(val==1){&nbsp; &nbsp; &nbsp; &nbsp; this.classList.remove("node-true");&nbsp; &nbsp; &nbsp; &nbsp; this.innerHTML=0;&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; this.classList.add("node-true");&nbsp; &nbsp; &nbsp; &nbsp; this.innerHTML=1;&nbsp; &nbsp; }&nbsp; &nbsp; checkRow(row);&nbsp; &nbsp; checkCol(col);&nbsp; &nbsp; if(checkGoals()){&nbsp; &nbsp; &nbsp; &nbsp; score+=rowLength;&nbsp; &nbsp; &nbsp; &nbsp; scoreDsipaly.innerHTML=score;&nbsp; &nbsp; &nbsp; &nbsp; init();&nbsp; &nbsp; }}// generates rows's goalsfunction rowsGoalsGenerater(){&nbsp; &nbsp; for ( let col=0;col<rowLength;col++){&nbsp; &nbsp; &nbsp; &nbsp; let randomNum = Math.floor(Math.random() * (Math.pow(2, rowLength) - 1))+1;&nbsp; &nbsp; &nbsp; &nbsp; table.rows.item(col).cells.item(rowGoal).innerHTML= randomNum;&nbsp; &nbsp; }}// generates columns's goals// for compatibility's sake, they will be made from rows goals&nbsp;function colsGoalsGenerater() {&nbsp; &nbsp; let goalsArray = [];// row's goals&nbsp; &nbsp; for ( let row =0; row<colLength; row++){&nbsp; &nbsp; &nbsp; &nbsp; goalsArray.push(table.rows.item(row).cells.item(rowGoal).innerHTML);&nbsp; &nbsp; }&nbsp; &nbsp; goalsArray=goalsArray.map((item)=>{&nbsp; &nbsp; &nbsp; &nbsp; item=Number(item).toString(2);&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if( item.length<rowLength){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let addZeros="0".repeat(rowLength-item.length);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item=addZeros.concat(item)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return item.split("")&nbsp; &nbsp; })&nbsp; &nbsp; for( let col=0; col<colLength; col++){&nbsp; &nbsp; &nbsp; &nbsp; let newGoal= []// col goal&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; for( let row=0; row<rowLength; row++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newGoal.push(goalsArray[row][col]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; newGoal = parseInt(newGoal.join(""), 2).toString(10);&nbsp; &nbsp; &nbsp; &nbsp; if (newGoal==0){// to avoid zero values on col goals&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(init, 10);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; table.rows.item(rowGoal).cells.item(col).innerHTML =newGoal;&nbsp; &nbsp; }}// checks if nodes values equals the row's goalfunction checkRow(row){&nbsp; &nbsp; let rowGoal= table.rows.item(row).cells.item(colGoal).innerHTML;&nbsp; &nbsp; let userInput=[];&nbsp; &nbsp; for ( let column = 0; column< rowLength; column++){&nbsp; &nbsp; &nbsp; &nbsp; userInput.push(table.rows.item(row).cells.item(column).innerHTML);&nbsp; &nbsp; }&nbsp; &nbsp; if(rowGoal== parseInt(userInput.join(""),2).toString(10)){&nbsp; &nbsp; &nbsp; &nbsp; table.rows.item(row).cells.item(colGoal).classList.add("goal-achived");&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; table.rows.item(row).cells.item(colGoal).classList.remove("goal-achived");&nbsp; &nbsp; }}// checks if nodes values equals the col's goalfunction checkCol(col){&nbsp; &nbsp; let colGoal = table.rows.item(rowGoal).cells.item(col).innerHTML;&nbsp; &nbsp; let userInput=[];&nbsp; &nbsp; for( let row=0; row< colLength; row++){&nbsp; &nbsp; &nbsp; &nbsp; userInput.push(table.rows.item(row).cells.item(col).innerHTML)&nbsp; &nbsp; }&nbsp; &nbsp; if (colGoal == parseInt(userInput.join(""), 2).toString(10)) {&nbsp; &nbsp; &nbsp; &nbsp; table.rows.item(rowGoal).cells.item(col).classList.add("goal-achived");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; table.rows.item(rowGoal).cells.item(col).classList.remove("goal-achived");&nbsp; &nbsp; }}function checkGoals(){&nbsp; &nbsp; for ( let goal=0;goal< goals.length;goal++){&nbsp; &nbsp; &nbsp; &nbsp; if (!goals[goal].classList.contains("goal-achived")) return false;&nbsp; &nbsp; }&nbsp; &nbsp; return true;}function checkStatue(){&nbsp; &nbsp; if(roundTime<=0 && !isPlaying){&nbsp; &nbsp; }}function timeReducer() {&nbsp; &nbsp; if (roundTime > 0) {&nbsp; &nbsp; &nbsp; &nbsp; roundTime--;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; window.location.href = `../game-over-page/game-over.html?score=${score}`;&nbsp; &nbsp; }&nbsp; &nbsp; dispalaySeconds.innerHTML = roundTime;}function changeLevel(){&nbsp; &nbsp; alert("fucks")}////////////// runing //////////////init();setInterval(timeReducer, 1000);*{&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; cursor: default; /* to prevent the cursor to be Text Select when it hovers on score and time counters */}body {&nbsp; &nbsp; background-color: #272727;&nbsp; &nbsp; color: #effffb;&nbsp; &nbsp; font-size: 24px;&nbsp; &nbsp; font-family: 'Bellota Text', cursive;}nav{&nbsp; &nbsp; height: 24vh;&nbsp; &nbsp; padding: 1rem;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-between;}.img-logo{&nbsp; &nbsp; width: 72px;&nbsp; &nbsp; display: block;&nbsp; &nbsp; margin: 0.8rem;&nbsp; &nbsp; cursor: pointer;}.info{&nbsp; &nbsp; height: 17vh;}.info,.text-info{&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; align-items: flex-start;}#seconds,#score,.level-label,.output-info {&nbsp; &nbsp; font-family: 'Lato', sans-serif;&nbsp; &nbsp; display: inline;&nbsp; &nbsp; font-size:1.1rem;&nbsp; &nbsp; font-weight: 400;}.container {&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; height: 76vh;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: center;}.table-block{&nbsp; &nbsp; transform: translate(0, -20px);&nbsp; &nbsp; border-spacing: 15px;}.node,.goal{&nbsp; &nbsp; width: 40px;&nbsp; &nbsp; height: 40px;&nbsp; &nbsp; box-shadow: 0 2px 0 0.3px #000000;&nbsp; &nbsp; transition: 0.3s;}.goal{&nbsp; &nbsp; border: solid 2px #50d890;}.goal-achived{&nbsp; &nbsp; box-shadow:none;&nbsp; &nbsp; background-color: #50d890;&nbsp; &nbsp; transform: translate(0 , 2px);}.node{&nbsp; &nbsp; border: solid 2px #4f98ca;&nbsp; &nbsp; cursor: pointer;}.node-true{&nbsp; &nbsp; box-shadow:none;&nbsp; &nbsp; background-color: #4f98ca;&nbsp; &nbsp; transform: translate(0, 2px);}<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp;<!-- <link rel="stylesheet" href="styles/style.css">&nbsp; &nbsp; <link rel="stylesheet" href="styles/queries.css"> -->&nbsp; &nbsp; <link href="https://fonts.googleapis.com/css?family=Bellota+Text&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">&nbsp; &nbsp; <title>Binary Game</title></head><body onkeydown = 'return false'&nbsp; onselectstart = 'return false'>&nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; &nbsp; <div class="info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="selection-block">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="level-label" for="levels">Level : </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="levels" onchange="changeLevel()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="20" >Easy</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="14">Meduim</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="10">Hard</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--&nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option >1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option >1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option >1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div> -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="output-block">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="output-info">Time Left: </h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span id="seconds">20</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="output-block">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="output-info">Score: </h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span id="score">0</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </nav>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <table class="table-block" cellspacing="15">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="goal"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="goal"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="goal"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="goal"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="node">0</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="goal"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="goal"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="goal"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="goal"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="goal"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="goal"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; </div>&nbsp; &nbsp; <!--<script src="scripts/script.js"></script>--></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5