Changing the text when you click on the buttons with typewriter effect-CodePudding

I want a certain text to be displayed to me depending on the button pressed. In the array I have set the text that needs to be assigned to the buttons. I know that can do this by passing a parameter (a ) to the type Text function when you click on the button, but for some reason it doesn't work. And it gives the error "Assignment to constant variable" If I don't add this parameter, then it outputs only the first word in the array to all buttons

const a = [];
a[0] = "На концерты";
a[1] = "На мероприятия";
a[2] = "На фестиваль";
a[3] = "На шоу";
a[4] = "На онлайн-событие";
const typewriter = document.querySelector('.typewriter')
// печать
function typeText() {
  let line = 0; // номер строки
  let count = 0; // счетчик позиции
  let out = ''; // то что мы делаем
  function typeLine() {
    // рисует строки
    let timeout = setInterval(function() {
      out  = a[0][line][count];
      typewriter.innerHTML = out;
      count  ;
      if (count >= a[0][line].length) {
        count = 0;
        line  ;

      }
      if (line == a[0].length) {
        clearTimeout(timeout)
        return true;
      }
    }, 70);
  }
  typeLine();
}
typeText();
const buttons = document.querySelectorAll('#buttonsId')
Array.from(buttons).map((item, index) => item.addEventListener('click', (e) => {
  typeText(a  )
}))

<div >
  <div >
    <div >
      <h1>Сервис <br> продажи билетов</h1>
      <p ></p>
    </div>
    <div >
      <button  id="buttonsId" data-action="0"><a href="#">Конференция</a></button>
      <button  id="buttonsId" data-action="1"><a href="#">Выставка</a></button>
      <button  id="buttonsId" data-action="2"><a href="#">Шоу</a></button>
      <button  id="buttonsId" data-action="3"><a href="#">Онлайн</a></button>
      <button  id="buttonsId" data-action="4"><a href="#">Театр</a></button>
    </div>
  </div>
</div>

CodePudding user response：

The issue is that you are declaring a with const and then trying to change a. Use let instead.

CodePudding user response：

let a = [];
a[0] = "На концерты";
a[1] = "На мероприятия";
a[2] = "На фестиваль";
a[3] = "На шоу";
a[4] = "На онлайн-событие";
const typewriter = document.querySelector('.typewriter')
// печать
function typeText(index = 0) {
  let line = 0; // номер строки
  let count = 0; // счетчик позиции
  let out = ''; // то что мы делаем
  function typeLine() {
    // рисует строки
    let timeout = setInterval(function() {
      out  = a[index][line][count];
      typewriter.innerHTML = out;
      count  ;
      if (count >= a[index][line].length) {
        count = 0;
        line  ;

      }
      if (line == a[index].length) {
        clearTimeout(timeout)
        return true;
      }
    }, 70);
  }
  typeLine();
}
typeText();
const buttons = document.querySelectorAll('#buttonsId')
console.log(buttons)
Array.from(buttons).map((item, index) => item.addEventListener('click', (e) => {
  typeText(index)
}))

<div >
  <div >
    <div >
      <h1>Сервис <br> продажи билетов</h1>
      <p ></p>
    </div>
    <div >
      <button  id="buttonsId" data-action="0"><a href="#">Конференция</a></button>
      <button  id="buttonsId" data-action="1"><a href="#">Выставка</a></button>
      <button  id="buttonsId" data-action="2"><a href="#">Шоу</a></button>
      <button  id="buttonsId" data-action="3"><a href="#">Онлайн</a></button>
      <button  id="buttonsId" data-action="4"><a href="#">Театр</a></button>
    </div>
  </div>
</div>

Try to passing the index to typeText function, it is works for me. Noted that index param has a default value 0.