如何在数组中同时存储和显示数据？

问题描述 投票：0回答：2

我想用JavaScript做一个简单的猜谜游戏。我想做一个猜谜游戏，大家可以对着随机数猜，每次猜完后，会把结果存储在一个数组中，并在右边显示以前的历史记录。

//here is the JS file

var a=[10];
let x=0;
function check()
{
    var num=Math.floor(Math.random()*5);
    var a= document.getElementById("inpt").value;
    if (num==a)
    {
        document.querySelector("#result").innerHTML="You are right in guess";
        a[x]=true;
    }
    else {
        document.querySelector("#result").innerHTML="You are Wrong in guess";
        a[x]=false;
    }}
if (a[x]==true)
{
    document.getElementById("finalize").innerHTML=x+1+": number turn is right";
}
else{
    document.getElementById("finalize").innerHTML=x+1+": number turn is wrong";
}
<!-- Here is the HTML file -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My gussing game</title>
    <script src="index.js"></script>
</head>
<body>
    <div style="width: 45%; float: left; background: gold; margin: 2px; text-align: center;">
        <H1>Game Input</H1>
        <hr>
        <input type="number" id="inpt" placeholder="Guess the number">
    <br>
    <button onclick="check()">Submit</button>
    <p id="result"></p>
    </div>
    <div style="width: 45%; float: left; background: rgb(42, 204, 177); margin: 2px; text-align: center;">
        <h1>Game Result</h1>
        <hr>
        <p id="finalize"></p>
    </div>    
</body>
</html>

我不明白为什么我的代码不能运行！！你能不能把所有的事情我简单介绍一下？

javascript html arrays dom input
2个回答
0
投票

你在检查函数中重新定义了变数a，所以赋值a[x]是为本地变数。

0
投票

如果你格式化你的代码，你会看到你想更新的字段在你的代码之外。check 函数。

var a = [10];
let x = 0;

function check() {
    var num = Math.floor(Math.random() * 5);
    var a = document.getElementById("inpt").value;
    if (num == a) {
        document.querySelector("#result").innerHTML = "You are right in guess";
        a[x] = true;
    }
    else {
        document.querySelector("#result").innerHTML = "You are Wrong in guess";
        a[x] = false;
    }
}

if (a[x] == true) {
    document.getElementById("finalize").innerHTML = x + 1 + ": number turn is right";
}
else {
    document.getElementById("finalize").innerHTML = x + 1 + ": number turn is wrong";
}

为了在每次提交猜测时执行该操作 你需要将这些字段移到该函数中。

var a = [10];
let x = 0;

function check() {
    var num = Math.floor(Math.random() * 5);
    var a = document.getElementById("inpt").value;
    if (num == a) {
        document.querySelector("#result").innerHTML = "You are right in guess";
        a[x] = true;
    }
    else {
        document.querySelector("#result").innerHTML = "You are Wrong in guess";
        a[x] = false;
    }

    if (a[x] == true) {
        document.getElementById("finalize").innerHTML = x + 1 + ": number turn is right";
    }
    else {
        document.getElementById("finalize").innerHTML = x + 1 + ": number turn is wrong";
    }
}
0
投票

这是你想要的行为吗？(如果是，那么我将在代码中做注释来解释)

演示。

enter image description here

//here is the JS file

//array to hold each guess:
var guesses = [];
//number to hold current guess number (could also use guesses.length):
let x = 0;
//random number rounded to a whole number:
var num = Math.round(Math.floor(Math.random()*5),0);

function check(){    
    //for testing output the random num:
    console.log(num)
    if (x == 0){
      //rest our message log div:
      document.getElementById("finalize").innerHTML = ""
    }
    //get the current guess:
    var a = document.getElementById("inpt").value;
    //if guess equals random num:
    if (num==a){
        document.querySelector("#result").innerHTML="You are right in guess";
        //push the current guess onto the guesses array:
        guesses.push(a);
        //update the div (<div id="guessArr"></div>) to hold a stringified representation
        //of our array, such as ["1", "2", "3"] if the user guesses 1, then 2, then 3:
        document.querySelector("#guessArr").innerHTML = JSON.stringify(guesses);
        //create a p tag (<p></p>) to store our message
        var p = document.createElement('p')
        //add the message to that p tag:
        p.innerHTML = x+1+": number turn is right"
        //append it to the div:
        document.getElementById("finalize").appendChild(p)
        //reset our guess number/count:
        x = 0;
        //reset our guesses array:
        guesses = [];
        //reset our input field:
        document.getElementById("inpt").value = "";
        //generate a new random number to guess:
        num = Math.round(Math.floor(Math.random()*5),0);
    }
    //if guess was incorrect:
    else {        
        document.querySelector("#result").innerHTML="You are Wrong in guess";
        //push the current guess onto the guesses array:
        guesses.push(a);
        //update the div (<div id="guessArr"></div>) to hold a stringified representation
        //of our array, such as ["1", "2", "3"] if the user guesses 1, then 2, then 3:
        document.querySelector("#guessArr").innerHTML = JSON.stringify(guesses);
        //create a p tag (<p></p>) to store our message
        var p = document.createElement('p')
        //add the message to that p tag:
        p.innerHTML = x+1+": number turn is wrong"
        //append it to the div:
        document.getElementById("finalize").appendChild(p)
        //add one to our guess number/count:
        x += 1;
    }
}
<!-- Here is the HTML file -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My gussing game</title>
    <script src="index.js"></script>
</head>
<body>
    <div style="width: 45%; float: left; background: gold; margin: 2px; text-align: center;">
        <H1>Game Input</H1>
        <hr>
        <input type="number" id="inpt" placeholder="Guess the number">
    <br>
    <button onclick="check()">Submit</button>
    <p id="result"></p>
    </div>
    <div style="width: 45%; float: left; background: rgb(42, 204, 177); margin: 2px; text-align: center;">
        <h1>Game Result</h1>
        <hr>
        <div id="guessArr"></div>
        
        <div id="finalize">
        
        </div>
    </div>    
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.