如何同時在數組中存儲和顯示數據？
[英]How can I store and show data in array at the same time?
問題描述
我想通過 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>
我不明白為什么我的代碼沒有運行？！ 你能簡單介紹一下我嗎？
3 個解決方案
解決方案1
0 2020-04-30 11:54:09
您在檢查 function 中重新聲明 var a，因此分配 a[x] 用於本地 var
解決方案2
0 2020-04-30 11:54:58
如果您格式化代碼，您將看到要更新的字段不在check function 之外：
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";
}
要在每次提交猜測時執行該操作，您需要將這些字段移動到 function 內：
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";
}
}
解決方案3
0 2020-04-30 12:01:48
這是你想要的那種行為嗎？ （如果是那我會在代碼中做注釋來解釋）
演示：
//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 ap 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 ap 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>
我可以每次都在本地存儲中存儲具有相同屬性的對象數組，即使我在 javaScript 中刷新頁面也會保留嗎？
[英]can I store array of object in local-storage with the same property every time which is gonna stay even if I refresh the page in javaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.