首页猿问什么原因会使 html...

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

Html5

慕尼黑5688855 2023-10-17 14:59:42

我用 HTML、CSS 和 JS 构建了一个二进制棋盘游戏，然后添加了一个选择标签，该标签将更改棋盘的级别，这意味着它将在表中添加/删除行和列问题是选择标签被卡住意味着它不会删除选项标签列表我不明白为什么它被卡住，所以我删除了1 个<label></label>标签2 <select id="levels" onchange="changeLevel()">id & onchange 属性3<option value="5" selected > Easy </option>取值及选择属性但它仍然卡住了我在谷歌上发现一些内容说我的CSS代码可能会影响它我检查了它并且它没有受到CSS代码的影响我无法预料为什么会发生这种情况，我之前确实多次使用了 select 标签，但我不明白为什么会发生这种情况

查看完整描述

2 回答

杨魅力

TA贡献1811条经验获得超5个赞

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

反对回复 2023-10-17

料青山看我应如是

TA贡献1772条经验获得超7个赞

如果你改变：

到：

它应该有效！

///////////////////

// 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 sake

let rowGoal=rowLength;

let colGoal=colLength;

let score=0;

///////////////

// functions //

///////////////

function init(){

resetVals();

rowsGoalsGenerater();

colsGoalsGenerater();

}

function resetVals() {

//roundTime = 20+1;

roundTime=20000;

for (let button = 0; button < buttons.length; button++) {

buttons[button].classList.remove("node-true");

buttons[button].innerHTML = 0;

}

for (let goal = 0; goal < goals.length; goal++) {

goals[goal].classList.remove("goal-achived");

}

// turns the value of a node 1/0 or true/ false

function trueOrFalse(){

let row = this.parentElement.rowIndex;

let col= this.cellIndex;

let val= this.innerHTML;

if(val==1){

this.classList.remove("node-true");

this.innerHTML=0;

}else{

this.classList.add("node-true");

this.innerHTML=1;

}

checkRow(row);

checkCol(col);

if(checkGoals()){

score+=rowLength;

scoreDsipaly.innerHTML=score;

init();

}

// generates rows's goals

function rowsGoalsGenerater(){

for ( let col=0;col<rowLength;col++){

let randomNum = Math.floor(Math.random() * (Math.pow(2, rowLength) - 1))+1;

table.rows.item(col).cells.item(rowGoal).innerHTML= randomNum;

}

// generates columns's goals

// for compatibility's sake, they will be made from rows goals

function colsGoalsGenerater() {

let goalsArray = [];// row's goals

for ( let row =0; row<colLength; row++){

goalsArray.push(table.rows.item(row).cells.item(rowGoal).innerHTML);

}

goalsArray=goalsArray.map((item)=>{

item=Number(item).toString(2);

if( item.length<rowLength){

let addZeros="0".repeat(rowLength-item.length);

item=addZeros.concat(item)

}

return item.split("")

})

for( let col=0; col<colLength; col++){

let newGoal= []// col goal

for( let row=0; row<rowLength; row++){

newGoal.push(goalsArray[row][col]);

}

newGoal = parseInt(newGoal.join(""), 2).toString(10);

if (newGoal==0){// to avoid zero values on col goals

setTimeout(init, 10);

}

table.rows.item(rowGoal).cells.item(col).innerHTML =newGoal;

}

// checks if nodes values equals the row's goal

function checkRow(row){

let rowGoal= table.rows.item(row).cells.item(colGoal).innerHTML;

let userInput=[];

for ( let column = 0; column< rowLength; column++){

userInput.push(table.rows.item(row).cells.item(column).innerHTML);

}

if(rowGoal== parseInt(userInput.join(""),2).toString(10)){

table.rows.item(row).cells.item(colGoal).classList.add("goal-achived");

}else{

table.rows.item(row).cells.item(colGoal).classList.remove("goal-achived");

}

// checks if nodes values equals the col's goal

function checkCol(col){

let colGoal = table.rows.item(rowGoal).cells.item(col).innerHTML;

let userInput=[];

for( let row=0; row< colLength; row++){

userInput.push(table.rows.item(row).cells.item(col).innerHTML)

}

if (colGoal == parseInt(userInput.join(""), 2).toString(10)) {

table.rows.item(rowGoal).cells.item(col).classList.add("goal-achived");

} else {

table.rows.item(rowGoal).cells.item(col).classList.remove("goal-achived");

}

function checkGoals(){

for ( let goal=0;goal< goals.length;goal++){

if (!goals[goal].classList.contains("goal-achived")) return false;

}

return true;

}

function checkStatue(){

if(roundTime<=0 && !isPlaying){

}

function timeReducer() {

if (roundTime > 0) {

roundTime--;

} else {

window.location.href = `../game-over-page/game-over.html?score=${score}`;

}

dispalaySeconds.innerHTML = roundTime;

}

function changeLevel(){

alert("fucks")

}

////////////

// runing //

////////////

init();

setInterval(timeReducer, 1000);

padding: 0;

margin: 0;

box-sizing: border-box;

cursor: default; /* to prevent the cursor to be Text Select when it hovers on score and time counters */

}

body {

background-color: #272727;

color: #effffb;

font-size: 24px;

font-family: 'Bellota Text', cursive;

}

nav{

height: 24vh;

padding: 1rem;

display: flex;

justify-content: space-between;

}

.img-logo{

width: 72px;

display: block;

margin: 0.8rem;

cursor: pointer;

}

.info{

height: 17vh;

}

.info,

.text-info{

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: flex-start;

}

#seconds,

#score,

.level-label,

.output-info {

font-family: 'Lato', sans-serif;

display: inline;

font-size:1.1rem;

font-weight: 400;

}

.container {

width: 100vw;

height: 76vh;

text-align: center;

display: flex;

align-items: center;

justify-content: center;

}

.table-block{

transform: translate(0, -20px);

border-spacing: 15px;

}

.node,

.goal{

width: 40px;

height: 40px;

box-shadow: 0 2px 0 0.3px #000000;

transition: 0.3s;

}

.goal{

border: solid 2px #50d890;

}

.goal-achived{

box-shadow:none;

background-color: #50d890;

transform: translate(0 , 2px);

}

.node{

border: solid 2px #4f98ca;

cursor: pointer;

}

.node-true{

box-shadow:none;

background-color: #4f98ca;

transform: translate(0, 2px);

}

<!DOCTYPE html>

<html>

<head>

<!-- <link rel="stylesheet" href="styles/style.css">

<title>Binary Game</title>

</head>

<nav>

<label class="level-label" for="levels">Level : </label>

<option value="14">Meduim</option>

</select>

</div>

<!-- <div>

</select>

</div> -->

</div>

<h3 class="output-info">Score: </h3>

</div>

</nav>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

</div>

</body>

</html>

反对回复 2023-10-17

2 回答
0 关注
74 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

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

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

2 回答

添加回答