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

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

我想用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
3个回答
0
投票

您在检查函数中重新声明了var a，所以分配a [x]是用于本地var

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

var guesses = [];
let x = 0;
var num = Math.round(Math.floor(Math.random()*5),0);

function check(){    
    console.log(num)
    var a = document.getElementById("inpt").value;
    if (num==a){
        document.querySelector("#result").innerHTML="You are right in guess";
        guesses.push(a);
        document.querySelector("#guessArr").innerHTML = JSON.stringify(guesses);
        var p = document.createElement('p')
        p.innerHTML = x+1+": number turn is right"
        document.getElementById("finalize").appendChild(p)
        x = 0;
        guesses = [];
        document.getElementById("inpt").value = "";
        num = Math.round(Math.floor(Math.random()*5),0);
    }
    else {
        document.querySelector("#result").innerHTML="You are Wrong in guess";
        guesses.push(a);
        document.querySelector("#guessArr").innerHTML = JSON.stringify(guesses);
        var p = document.createElement('p')
        p.innerHTML = x+1+": number turn is wrong"
        document.getElementById("finalize").appendChild(p)
        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.