Javascript 如何在阵列中同时存储和显示数据？_Javascript_Html_Arrays_Dom_Input

Javascript 如何在阵列中同时存储和显示数据？

javascript html arrays dom input

Javascript 如何在阵列中同时存储和显示数据？,javascript,html,arrays,dom,input,Javascript,Html,Arrays,Dom,Input,我想用JavaScript做一个简单的猜谜游戏。我想做一个猜谜游戏，在这里人们可以根据随机数来猜数字。每次猜测后，它都会将结果存储在一个数组中，并显示在以前历史记录的右侧 //这是JS文件 var a=[10]；设x=0；函数检查（） { var num=Math.floor（Math.random（）*5）； var a=document.getElementById（“inpt”）.value；如果（num==a） { document.querySelector（“#result”

我想用JavaScript做一个简单的猜谜游戏。我想做一个猜谜游戏，在这里人们可以根据随机数来猜数字。每次猜测后，它都会将结果存储在一个数组中，并显示在以前历史记录的右侧

//这是JS文件
var a=[10]；
设x=0；
函数检查（）
{
var num=Math.floor（Math.random（）*5）；
var a=document.getElementById（“inpt”）.value；
如果（num==a）
{
document.querySelector（“#result”）.innerHTML=“你猜对了”；
a[x]=真；
}
否则{
document.querySelector（“#result”）.innerHTML=“你猜错了”；
a[x]=假；
}}
如果（a[x]==true）
{
document.getElementById（“finalize”）.innerHTML=x+1+“：数字向右旋转”；
}
否则{
document.getElementById（“finalize”）.innerHTML=x+1+“：数字旋转错误”；
}


我的喷泉游戏
游戏输入



提交

比赛结果

您在check函数中重新声明var a，因此分配a[x]用于本地var

如果您格式化代码，您将看到要更新的字段在

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";
    }
}

要在每次提交猜测时执行该操作，需要将这些字段移动到该函数中：

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";
    }
}

如果格式化代码，您将看到要更新的字段不在

检查功能的范围内：
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";
    }
}

要在每次提交猜测时执行该操作，需要将这些字段移动到该函数中：
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";
    }
}

这是你想要的行为吗？（如果是的话，我会在守则中作出解释）
演示：


//这是JS文件
//用于保存每个猜测的数组：
var猜测=[]；
//用于保存当前猜测编号的编号（也可以使用guesses.length）：
设x=0；
//四舍五入为整数的随机数：
var num=Math.round（Math.floor（Math.random（）*5），0）；
函数检查（）{
//对于测试输出，随机数为：
console.log（num）
如果（x==0）{
//rest消息日志div：
document.getElementById（“finalize”）.innerHTML=“”
}
//获取当前猜测：
var a=document.getElementById（“inpt”）.value；
//如果guess等于random num：
如果（num==a）{
document.querySelector（“#result”）.innerHTML=“你猜对了”；
//将当前猜测推送到猜测数组上：
猜。推（a）；
//更新div（）以保存字符串化表示
//例如[“1”、“2”、“3”]如果用户猜测1，那么猜测2，然后猜测3：
document.querySelector（“#guessArr”）.innerHTML=JSON.stringify（猜测）；
//创建一个p标签（）来存储我们的消息
var p=document.createElement（'p'）
//将消息添加到该p标记：
p、 innerHTML=x+1+“：数字右转”
//将其附加到div：
document.getElementById（“finalize”）.appendChild（p）
//重置我们的猜测数/计数：
x=0；
//重置猜测数组：
猜测=[]；
//重置我们的输入字段：
document.getElementById（“inpt”）.value=“”；
//生成要猜测的新随机数：
num=Math.round（Math.floor（Math.random（）*5），0）；
}
//如果猜测不正确：
否则{
document.querySelector（“#result”）.innerHTML=“你猜错了”；
//将当前猜测推送到猜测数组上：
猜。推（a）；
//更新div（）以保存字符串化表示
//例如[“1”、“2”、“3”]如果用户猜测1，那么猜测2，然后猜测3：
document.querySelector（“#guessArr”）.innerHTML=JSON.stringify（猜测）；
//创建一个p标签（）来存储我们的消息
var p=document.createElement（'p'）
//将消息添加到该p标记：
p、 innerHTML=x+1+“：数字转弯错误”
//将其附加到div：
document.getElementById（“finalize”）.appendChild（p）
//在我们的猜测数字/计数中添加一个：
x+=1；
}
}

我的喷泉游戏
游戏输入



提交

比赛结果

这是你想要的行为吗？（如果是的话，我会在守则中作出解释）
演示：


//这是JS文件
//用于保存每个猜测的数组：
var猜测=[]；
//用于保存当前猜测编号的编号（也可以使用guesses.length）：
设x=0；
//四舍五入为整数的随机数：
var num=Math.round（Math.floor（Math.random（）*5），0）；
函数检查（）{
//对于测试输出，随机数为：
console.log（num）
如果（x==0）{
//rest消息日志div：
document.getElementById（“finalize”）.innerHTML=“”
}
//获取当前猜测：
var a=document.getElementById（“inpt”）.value；
//如果guess等于random num：
如果（num==a）{
document.querySelector（“#result”）.innerHTML=“你猜对了”；
//将当前猜测推送到猜测数组上：
猜。推（a）；
//更新div（）以保存字符串化表示
//例如[“1”、“2”、“3”]如果用户猜测1，那么猜测2，然后猜测3：
document.querySelector（“#guessArr”）.innerHTML=JSON.stringify（猜测）；
//创建一个p标签（）来存储我们的消息
var p=document.createElement（'p'）
//将消息添加到该p标记：
p、 innerHTML=x+1+“：数字右转”
//将其附加到div：
document.getElementById（“finalize”）.appendChild（p）
//重置我们的猜测数/计数：
x=0；
//重置猜测数组：
猜