Блог

Я хочу изменить содержимое двух 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>