如何将数组值返回到动态创建的元素与香草javascript

我有一个值的数组，当我点击一个动态创建的div时，其中一个值被随机分配给它。我想在页面上显示数组项目的值，当我点击动态创建的div时，但我无法弄清楚如何去做。当我使用console.log或alert时，我得到了返回的值，但是对于我来说，无法弄清楚如何让值显示在实际页面上。我非常新的JavaScript，并希望有这方面的帮助 - 这是我到目前为止有：如何将数组值返回到动态创建的元素与香草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)]); 
};

来源

2017-10-18 SGO

的论点，即'to'不应该在那里我承担？只要在你所附加的'div'中添加值：'gameboard.innerHTML + ='

' + solutionArray[i] + '

';'。此外，单行上的双重分配不是必需的。 –

hmm，这将数组的所有值添加到dynamiclaly创建的元素。我试图只让每个人单独显示，只有当我点击各自的股利。（不知道流氓从哪里来） – SGO

你是在正确的轨道上！

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

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

function startGame() { 
for (var i = 0; i <= ((solutionArray.length) - 1); i++) { 
    var card = document.createElement("div"); 
    card.classList.add('cards'); 
    card.onclick = function() { 
     this.innerHTML = tileImages[Math.floor(Math.random() * tileImages.length)]; 
    } 
    gameboard.appendChild(card); 
}

}

它也可能是一个好主意，删除流氓 '到' 在6行

编辑：删除从startGame功能

来源

2017-10-18 03:47:33

感谢您的回应。不知道那个任性的'来'来自哪里。我试过你的解决方案，但只是得到一个空白页面。没有创建div并且数组值没有被返回。 – SGO

我的不好，根据我的编辑从函数中删除参数，它应该是好的。 –

非常感谢！我一直试图弄清楚这几天。 – SGO

如何将数组值返回到动态创建的元素与香草javascript

回答

相关问题