НАЧАЛО: удаление элементов из массива Javascript - PullRequest
Новая
       41

НАЧАЛО: удаление элементов из массива Javascript

1 голос
/ 26 апреля 2020

Я кодирую генератор случайных кавычек. У меня почти полностью закодировано, как я хочу. Я новичок в HTML и никогда не использовал Javascript до этих выходных. Я взял из нескольких уроков, чтобы написать это именно так, как я хочу, и очень горжусь. У меня есть последнее, что я пытаюсь сделать. Когда вызывается элемент из массива, я хочу, чтобы он был удален, сохранен в другом массиве, а когда исходный массив достигнет 0, я хочу, чтобы он был сброшен. Я знаю, что это возможно, но я не уверен, что добавить в этот скрипт, чтобы он работал. Большое спасибо за любую помощь. 

const quotes = [{
    game: 'CARD TYPE 1',
    quote: "This is the card description for Card Type 1",
    rule: "Card Type 1 Rules"
  },
  {
    game: 'CARD TYPE 2',
    quote: "This is the card description for Card Type 2",
    rule: "Card Type 2 Rules"
  },
  {
    game: 'CARD TYPE 3',
    quote: "This is the card description for Card Type 3",
    rule: "Card Type 3 Rules"
  }
];

const maincontainer = document.querySelector("#quoteBtn");
const questionStyle = document.querySelector("#quote");
const gameTitleStyle = document.querySelector("#gameTitle");
const ruleStyle = document.querySelector("#ruleTxt");

quoteBtn.addEventListener("click", displayQuote);

function displayQuote() {
  let number = Math.floor(Math.random() * quotes.length);

  gameTitle.innerHTML = quotes[number].game;
  quote.innerHTML = quotes[number].quote;
  ruleTxt.innerHTML = quotes[number].rule;
}
<style type="text/css">
  body {
    font-family: "Poppins", sans-serif;
    background-color: #3F6BFF;
  }
  
  .maincontainer {
    position: relative;
    width: 500px;
    height: 300px;
    animation: flip 1s;
    text-align: center;
    margin: 0 auto;
    border-radius: 25px;
  }
  
  .thecard {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
    border-radius: 25px;
  }
  
  .thecard:active {
    transform: rotateY(360deg);
  }
  
  .thefront {
    position: absolute;
    width: 100%;
    height: 100%;
    padding-right: 30px;
    padding-left: 30px;
    backface-visibility: hidden;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 25px;
  }
  
  .theback {
    position: absolute;
    width: 100%;
    height: 100%;
    padding-right: 30px;
    padding-left: 30px;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background: #000;
    border-radius: 25px;
  }
  
  .gameTitleStyle {
    font-weight: 800;
    font-size: 32px;
    text-transform: uppercase;
  }
  
  .ruleStyle {
    position: relative;
    top: -20px;
    font-style: italic;
  }
  
  .questionStyle {
    position: relative;
    top: 20px;
    font-size: 18px;
  }
</style>

<body>

  <div class="maincontainer" id="quoteBtn">

    <div class="thecard">

      <div class="thefront">
        <h1 class="gameTitleStyle" id="gameTitle">Business Name</h1>
        <p class="ruleStyle" id="ruleTxt">Rules</p>
        <p class="questionStyle" id="quote">Card Description</p>
      </div>

      <div class="theback"></div>

    </div>


  </div>


</body>

1 Ответ

1 голос
/ 26 апреля 2020

Удаление элемента из массива можно выполнить методом Array.prototype.splice () . Например, это удаляет элемент 2 из массива с именем «items» и возвращает удаленный элемент в новый массив: 

let removedItems = items.splice(2);

Добавление элементов в массив с помощью Array.prototype.pu sh () : 

otherArray.push(...removedItems);

...removedItems преобразует массив removeItems в список элементов. ... называется оператором спреда .

Их должно быть достаточно для достижения sh того, что вы хотите.

...