我想在用户单击按钮时同时更改两个HTML元素的内容。元素的内容更改为基于一个随机数,该随机数随后将访问函数中定义的数组。
那就是我想发生的事情,但是当我单击按钮(调用'deal()'函数)时,我没有任何改变。
谁能给我任何建议?
这是我的代码-
function createCard(){
var shuffle = Math.floor(Math.random()*2) +1;
var title = document.getElementById("cardTitle");
var text = document.getElementById('cardText');
var button = document.getElementById('cardButton');
var cardTitle = ["Bacon", "Hot Dog Lattice"];
var cardText = ['Frabdious Day', 'Calee, Calay',];
var cardId = [cardTitle, cardText];
switch (shuffle) {
case 1:
title.innerHTML = cardId(cardTitle[0]);
text.innerHTML = cardId(cardText[0]);
break;
case 2:
title.innerHTML = cardId(cardTitle[1]);
text.innerHTML = cardId(cardText[1]);
break;
default:
title.innerHTML = "Oops";
text.innerHTML = "Whoopsie";
break;
}
}
function deal(){
createCard();
}
这可能是一个更好的解决方案:
function createCard(){
var shuffle = Math.floor(Math.random()*2);
var cards = [
{
title: "Bacon",
text: "Frabdious Day"
},
{
title: "Hot Dog Lattice",
text: "Calee, Calay"
}
];
var shuffledCard = cards[shuffle];
if (!shuffledCard){
shuffledCard = {
title: "Oops",
text: "Whoopsie"
}
}
var title = document.getElementById("cardTitle");
var text = document.getElementById('cardText');
var button = document.getElementById('cardButton');
title.innerHTML = shuffledCard.title;
text.innerHTML = shuffledCard.text;
}
function deal(){
createCard();
}
<div id="cardTitle">Start value</div>
<div id="cardText">Start value</div>
<button id="cardButton" onClick="deal()">Deal</button>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句