我可以使用 Javascript 中的数组更改大量 HTML 元素吗？答案

【问题标题】：Can I change numerous HTML elements using an array in Javascript?我可以使用 Javascript 中的数组更改大量 HTML 元素吗？
【发布时间】：2016-10-06 11:52:08
【问题描述】：

我想在用户单击按钮时同时更改两个 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();
}

【问题讨论】：

完全删除 cardId 应该可以解决这个问题

标签： javascript arrays switch-statement

【解决方案1】：

这可能是一个更好的解决方案：

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>

【讨论】：