我正在構建一個簡單的記憶游戲，只是為了展示功能。用戶插入一個字串，我將其隨機播放并在螢屏上顯示拆分字符 - 作為星星。(* * * *)
每當用戶單擊星號時，它將顯示數字的實際值。
現在我有一個用于輸入的文本框，我打亂了字符，但我不確定使用該陣列并將字串呈現為星號的最佳方法是什么，onclick 將翻轉回真正的字符。感謝您的幫助！
const section = document.querySelector("section");
function myFunction() {
var input = document.getElementById("searchTxt").value;
const x = document.querySelector("p");
const yourInp = "Your input is: "
x.textContent = yourInp;
document.getElementById("str").innerHTML = input;
const cards = input.split('');
const randomize = () => {
cards.sort(() => Math.random() - 0.5);
return cards;
};
const cardsGenerator = () => {
const cards = randomize();
console.log(cards);
cards.forEach(item => {
console.log(item);
});
}
cardsGenerator();
}<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Game</title>
</head>
<body>
<h1> Memory Game </h1>
<input name="searchTxt" type="search" maxlength="4" id="searchTxt" class="searchField" value="Word" />
<button onclick="myFunction()">Start Game</button>
<p id="yourstr"> </p>
<p id="str"> </p>
<section></section>
</body>uj5u.com熱心網友回復：
也許您想檢查這種方法：
const section = document.querySelector("section");
function myFunction() {
var input = document.getElementById("searchTxt").value;
const x = document.querySelector("p");
const yourInp = "Your input is: " input;
x.textContent = yourInp;
const cards = input.split('');
const randomize = () => {
cards.sort(() => Math.random() - 0.5);
return cards;
};
const cardsGenerator = () => {
container.innerText = ''; // clear container
const cards = randomize();
cards.forEach(item => {
const d = document.createElement("div"); // create div
d.innerText = '*'; // set text to *
d.onclick = () => { d.innerText = item; } // handle onclick to display real value
container.appendChild(d); // append div as child to container
});
}
cardsGenerator();
}div.cards {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding: 3px;
background: gray;
border-radius: 2px;
font-size: x-large;
}
div.cards > div {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
padding: 10px;
background: white;
border-radius: 6px;
}<h1> Memory Game </h1>
<input name="searchTxt" type="search" maxlength="4" id="searchTxt" class="searchField" value="Word" />
<button onclick="myFunction()">Start Game</button>
<p id="yourstr"> </p>
<div class="cards" id="container">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/426162.html
標籤：javascript html dom
上一篇：更改框Javascript的顏色