Question

我有一个值数组，当我点击一个动态创建的div时，其中一个值被随机分配给它。当我点击动态创建的div时，我想在页面上显示数组项的值，但我无法弄清楚如何做到这一点。当我使用console.log或alert时，我得到了返回的值，但是对于我的生活，我无法弄清楚如何在实际页面上显示值。我是javascript的新手，非常感谢任何帮助 - 这是我到目前为止所做的：

<div id="gameboard"></div>

16个动态创建的div在#gameboard div下创建并具有类.cards，我用css设置了它们。

#gameboard {
display: flex;
width: 800px;
height: 575px;
min-height: 575px;
margin-right: auto;
margin-left: auto;
padding-top: 1rem;
padding-bottom: 1rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: #dadfe8;
}
.cards {
width: 150px;
height: 100px;
margin-right: 5px;
margin-left: 5px;
padding-top: 2rem;
border: 2px solid black;
border-radius: 5px;
background-color: #3065ba;
font-size: 4rem;
text-align: center;
cursor: pointer;
}

这是javascript：

var tileImages = ['A','B','C','D','E','F','G','H'];
var gameboard = document.getElementById('gameboard');
var solutionArray = tileImages.concat(tileImages); 

shuffleArray(solutionArray);
console.log(solutionArray);  to
function shuffleArray(d) {
 for (var c = d.length - 1; c > 0; c--) {
  var b = Math.floor(Math.random() * (c + 1));
  var a = d[c];
  d[c] = d[b];
  d[b] = a;
 }
return d
};

startGame();

function startGame() {
 var clearedBoard = gameboard.innerHTML = "";
 for (var i=0; i<= ((solutionArray.length)-1); i++) {
  var cards = gameboard.innerHTML += '<div class="cards"></div>';
 }
};
var randomValue = gameboard.onclick = function() {
console.log(tileImages[Math.floor(Math.random() * tileImages.length)]);
};

Answer 1

你走在正确的轨道上！

只需将显示逻辑从游戏板移动到卡片本身。

为此，请使用Document api创建卡片，而不是将其定义为字符串。然后很容易附加一个处理它的显示逻辑的onclick回调。

nil

}

将第6行中的流氓'删除'也可能是一个好主意。

编辑：从startGame函数

中删除了参数

如何使用vanilla javascript

1 个答案: