При нажатии на кнопку, ставиться один текст а другой уходит

Question

[![][2]][2]**

Помогите пожалуйста, мне нужно чтобы при нажатии на одну из кнопок ставился соответствующий текст, а прошлый уходил. Пример: человек нажал на button-1 появился text1,нажал на button-3 появился text3 на том-же месте, а text1 пропал.

<div class="block-1"><button class="button-1">Купить</button></div>
<div class="block-2"></div>
<script>
document.querySelector('.block-1').addEventListener('click', function() {
  document.querySelector('.block-2').innerHTML = 'loremispum\nloremispum\nloremispum\nloremispum\nloremispum\nloremispum\nloremispum\nloremispum';
})
</script>

пока что такое сделала, но тут только принцип нажал - появился (

БУДУ МЕГА БЛАГОДАРНА ЗА ПОМОЩЬ! ♥

Answer 1

Стоит подучить js. Данный способ подходит для любого количества кнопок в первом блоке

  const blockOne = document.querySelector('.block-1');
  const blockTwo = document.querySelector('.block-2');
  const btns = blockOne.querySelectorAll('button');
    if (blockOne && blockTwo && btns.length) {
    btns.forEach(e => {
      let text = e.dataset.text;
      let color = e.dataset.color;
      e.addEventListener('click', () => {
        blockTwo.innerHTML = text;
        blockTwo.style = `color: ${color}`
      })
    })
  }

.block-2 {
  margin-top: 20px;
  font-size: 20px;
}

        <div class="test">
          <div class="block-1">
            <button data-text="text 1" data-color="#c8ff00" class="button-1">Кнопка 1</button>
            <button data-text="text 2" data-color="#ff0055" class="button-2">Кнопка 2</button>
            <button data-text="text 3" data-color="#0077ff" class="button-3">Кнопка 3</button>
            <button data-text="text 4" data-color="#ff4800" class="button-4">Кнопка 4</button>
          </div>
          <div class="block-2">text 0</div>
        </div>

Answer 2

ставиться один текст а другой уходит

Я воспринял это буквально, извините.. ?

const blockOne = document.querySelector('.block-1');
const blockTwo = document.querySelector('.block-2');
const btns = [...blockOne.querySelectorAll('button')];
const tmp = document.querySelector('#lol-tmp');

function CreateText(text, color) {
  let temp = tmp.content.firstElementChild.cloneNode(true);
  temp.querySelector('.lol-head').innerText = text;
  temp.classList.add('lol-show');
  temp.classList.add('lol-animation');
  temp.style.setProperty('--color', color);
  
  blockTwo.append(temp);
  setTimeout(() => {
    temp.classList.remove('lol-animation');
  }, 1000);
}

CreateText(btns[0].getAttribute('data-text'), btns[0].getAttribute('data-color'));

btns.map(e => {
  e.addEventListener('click', e => {
    let target = e.target;
    if(target.disabled !== true) {
      btns.map(e => e.disabled = true);
      //
      let old = blockTwo.querySelector('.lol.lol-show');
      if(old) {
        old.classList.remove('lol-show');
        old.classList.add('lol-hide');
        old.classList.add('lol-animation');
        setTimeout(() => {
          old.remove();
        }, 3000);
      }
      CreateText(target.getAttribute('data-text'), target.getAttribute('data-color'));
      //
      setTimeout(e => {
        btns.map(e => e.disabled = false);
      }, 1000);
    }
  });
});

.block-2 {
  width: 100%;
  height: 150px;
  margin-top: 20px;
  font-size: 20px;
  position: relative;
  overflow: hidden;
}

.lol {
  display: block;
  width: 50px;
  height: 100px;
  position: absolute;
  left: 0;
  --color: black;
}

.lol-head,
.lol-hand,
.lol-body,
.lol-legs {
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.lol-head {
  display: inline-block;
  width: auto;
  white-space: nowrap;
  color: var(--color);
}

.lol-body {
  display: block;
  width: 1px;
  height: 50px;
  background: var(--color);
  top: 1em;
}

.lol-hand {
  top: calc(1em + 5px);
}

.lol-hand::before,
.lol-hand::after,
.lol-legs::before,
.lol-legs::after {
  content: '';
  display: block;
  width: 50px;
  height: 1px;
  background: var(--color);
  position: absolute;
}

.lol-legs {
  top: calc(1em + 50px);
}

.lol-hand::before,
.lol-legs::before {
  left: 0;
  transform-origin: left center;
}

.lol-hand::after,
.lol-legs::after {
  right: 0;
  transform-origin: right center;
}

.lol-hand::before {transform: rotate(45deg);}
.lol-hand::after {transform: rotate(-45deg);}

.lol-legs::before {transform: rotate(65deg);}
.lol-legs::after {transform: rotate(-65deg);}

.lol-show.lol-animation {
  animation: show 1s linear forwards;
}
.lol-hide.lol-animation {
  animation: hide 3s linear forwards;
}

.lol-animation .lol-hand::before {
  animation: hand-right 1s linear infinite;
}

.lol-animation .lol-hand::after {
  animation: hand-left 1s linear infinite;
}

.lol-animation .lol-legs::before {
  animation: legs-right 1s linear infinite;
}

.lol-animation .lol-legs::after {
  animation: legs-left 1s linear infinite;
}

@keyframes show {
  from {top: -150%;}
  to {top: 0%;}
}

@keyframes hide {
  from {left: 0%;}
  to {left: 110%;}
}

@keyframes hand-left {
  50% {transform: rotate(-85deg)}
}

@keyframes hand-right {
  50% {transform: rotate(85deg)}
}

@keyframes legs-left {
  50% {transform: rotate(-85deg)}
}

@keyframes legs-right {
  50% {transform: rotate(85deg)}
}

<div class="test">
  <div class="block-1">
    <button data-text="text 1" data-color="#91b319" class="button-1">Кнопка 1</button>
    <button data-text="text 2" data-color="#ff0055" class="button-2">Кнопка 2</button>
    <button data-text="text 3" data-color="#0077ff" class="button-3">Кнопка 3</button>
    <button data-text="text 4" data-color="#ff4800" class="button-4">Кнопка 4</button>
  </div>
  <div class="block-2">
    
  </div>
</div>

<template id="lol-tmp">
  <div class="lol">
    <div class="lol-head">%TEXT%</div>
    <div class="lol-hand"></div>
    <div class="lol-body"></div>
    <div class="lol-legs"></div>
  </div>
</template>

БЛОГ НА HUSL

При нажатии на кнопку, ставиться один текст а другой уходит

Ответы (2 шт):