Блог

Я запускаю функцию JS, и в конце функции я хочу отправить значение в свой HTML, чтобы сохранить память о последнем использованном значении. Затем я хочу снова вызвать функцию JS и отправить обратно значение, которое я передал ей последним.

Причина, по которой я хочу это сделать, заключается в том, что я могу быть уверен, что когда пользователь нажимает «Новая карточка», это не повторится. Есть идеи о том, что я здесь делаю не так?

Я нашел элементы, которые показывают, как перейти от одного способа к другому, но это все.

 <div class="main-container">
  <div class="card-pull">
    <h2>Your card of the day!</h2>
    <!-- The card image will display below -->
    <img src="" alt="random card pic" id="cardImage">
    </div>
    <div id="cardName">
      <!-- The card name will display here -->
    </div>
    <input type="hidden" name="currentCardNumber" id="currentCardNumber" />
    <button onclick="newCard(currentCardNumber)">New Card</button>
    <script src="cardpull.js"></script>
  </div>

function newCard(currentCardNumber = 0) {
  const randomNumber = Math.floor(Math.random() * 4);
  console.log(currentCardNumber);
  if (randomNumber == currentCardNumber) {
    newCard(currentCardNumber);
  } else {
    document.getElementById("currentCardNumber").value = randomNumber;
    document.getElementById("cardImage").src = Object.values(
      cards[randomNumber]
    )[1];
    document.getElementById("cardName").innerHTML = Object.values(
      cards[randomNumber]
    )[0];
  }
}
  

Я смог найти другой способ (возможно, лучший вариант) сделать то, что я пытался сделать. Я смог заставить JS получать значение того, что было в HTML-коде, получив атрибут .innerHTML.

Сделав это, я смог сравнить текущее значение на экране со значением, которое будет опубликовано в результате случайного розыгрыша. Затем я проверил свою функцию, чтобы увидеть, совпадают ли они, и если да, то она снова запустит функцию. Мой код приведен ниже (включая массив объектов). Возможно, есть более эффективный способ сделать это, но он определенно работает сейчас.

HTML

 <div class="main-container">
  <div class="card-pull">
    <h2>Your card of the day!</h2>
    <!-- The card image will display below -->
    <img src="" alt="random card pic" id="cardImage">
    </div>
    <div id="cardName">
      <!-- The card name will display here -->
    </div>
    <button onclick="newCard()">New Card</button>
    <script src="cardpull.js"></script>
  </div>
  

JS

 const cards = [
  { blackSesame: "Black Sesame", image: "images/blacksesame.jpg" },
  { carrots: "Carrots", image: "images/carrots.jpg" },
  { cilantro: "Cilantro", image: "images/cilantro.jpg" },
  { papaya: "Papaya", image: "images/papaya.jpg" },
  { rosemary: "Rosemary", image: "images/rosemary.jpg" },
];

function newCard() {
  const randomNumber = Math.floor(Math.random() * 5);
  const currentCard = document.getElementById("cardName").innerHTML;

  if (currentCard == Object.values(cards[randomNumber])[0]) {
    newCard();
  } else {
    document.getElementById("cardImage").src = Object.values(
      cards[randomNumber]
    )[1];
    document.getElementById("cardName").innerHTML = Object.values(
      cards[randomNumber]
    )[0];
  }
}