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

问题描述

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

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

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

1 个<label></label>标签

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

3 <option value="5" selected > Easy </option>value 和 selected 属性

但它仍然卡住

我在谷歌上发现了一些东西说我的 css 代码可能会影响它我检查了它并且它不受 css 代码的影响

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/queries.css">
    <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">
    <title>Binary Game</title>
</head>
<body onmousedown = 'return false' onselectstart = 'return false'>
    <nav>
        <div class="info">
            <!-- <div class="selection-block">
                <label class="level-label" for="levels">Level : </label>
                <select id="levels" onchange="changeLevel()">
                    <option value="20" selected>Easy</option>
                    <option value="14">Meduim</option>
                    <option value="10">Hard</option>
                </select>
            </div> -->
            <div>
                <select>
                    <option >1</option>
                    <option >1</option>
                    <option >1</option>
                </select>
            </div>
            <div class="text-info">
                <div class="output-block">
                    <h3 class="output-info">Time Left: </h3>
                    <span id="seconds">20</span>
                </div>
                <div class="output-block">
                    <h3 class="output-info">Score: </h3>
                    <span id="score">0</span>
                </div>
            </div>
        </div>
    </nav>
    <div class="container">
        <table class="table-block" cellspacing="15">
            <tr class="row">
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="goal"></td>
            </tr>
            <tr class="row">
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="goal"></td>
            </tr>
            <tr class="row">
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="goal"></td>
            </tr>
            <tr class="row">
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="goal"></td>
            </tr>
            <tr class="row">
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="node">0</td>
                <td class="goal"></td>
            </tr>
            <tr class="row">
                <td class="goal"></td>
                <td class="goal"></td>
                <td class="goal"></td>
                <td class="goal"></td>
                <td class="goal"></td>
            </tr>    
        </table>
    </div>
    <script src="scripts/script.js"></script>
</body>
</html>

*{
    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);
}

///////////////////
// 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);

codePen 上的游戏

标签： javascripthtmlcsshtml-select

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

问题描述

解决方案

推荐阅读