Блог

Главная - Вопросы по программированию - Попытка преобразовать слова в массив и вывести их на страницу, используя метод forEach, но каждая запись перезаписывает предыдущий элемент?

Попытка преобразовать слова в массив и вывести их на страницу, используя метод forEach, но каждая запись перезаписывает предыдущий элемент?

#javascript

#javascript

Вопрос:

Я пытаюсь обернуть слова, введенные в текстовую область, разделив их на массив, и используя метод foreach, чтобы обернуть каждое слово в разные стили ключевых слов. Все это работает в консоли. Но когда я пытаюсь вывести его в DOM, он отображает только ПОСЛЕДНИЙ элемент в массиве, поскольку они перезаписывают предыдущие элементы… Возможно, я делаю это неправильно, открыт для предложений по повторному факторингу.

Например:

Если вы введете «мужская обувь, дешевая мужская обувь, доступная мужская обувь»

Отображается только: доступная мужская обувь.

Я хочу, чтобы он отображал их все в новом формате.

 const mainInput = document.getElementById('main-input');
const mainOutput = document.getElementById('main-output');
let keywordsArray;

mainInput.addEventListener('input', updateValue);

function updateValue(e) {
  const mainInput = document.getElementById('main-input');
  const mainOutput = document.getElementById('main-output');
  keywordsArray = mainInput.value.split('n');

  keywordsArray.forEach(textUpdater);

  function textUpdater(item, index, array) {
    console.log(item)
    console.log(item.replace(/(^|s )/g, "$1 "))
    console.log('['   item   ']');
    console.log('"'   item   '"');
    mainOutput.innerText = '['   item   ']';

  };
}  
 <div class="container">
  <div class="input-box">

    <textarea name="main-input" id="main-input" class="main-input" cols="30" rows="10" placeholder="Enter Keywords Here..."></textarea>

    <p>What match types?</p>
    <div class="type-selectors">
      <p>Broad:</p> <input type="checkbox" id="broadCheck" checked onclick="updateValue()">

      <p>Modified:</p> <input type="checkbox" id="modifiedCheck" checked onclick="updateValue()">

      <p>Phrase:</p> <input type="checkbox" id="phraseCheck" checked onclick="updateValue()">

      <p>Exact:</p> <input type="checkbox" id="exactCheck" checked onclick="updateValue()">
    </div>
  </div>

  <div class="output-box">
    <textarea class="main-output" id="main-output"></textarea>
  </div>

</div>

Ответ №1:

Вы должны использовать = для добавления текста вместо перезаписи предыдущего текста. Кроме того, вы должны установить значение текстовой области вместо его innerText .

 mainOutput.innerText = '['   item   ']';

Следует изменить на:

 mainOutput.value  = '['   item   ']';
  

 const mainInput = document.getElementById('main-input');
const mainOutput = document.getElementById('main-output');
let keywordsArray;

mainInput.addEventListener('input', updateValue);

function updateValue(e) {
  const mainInput = document.getElementById('main-input');
  const mainOutput = document.getElementById('main-output');
  keywordsArray = mainInput.value.split('n');

  keywordsArray.forEach(textUpdater);

  function textUpdater(item, index, array) {
    //console.log(item)
    //console.log(item.replace(/(^|s )/g, "$1 "))
    //console.log('['   item   ']');
    //console.log('"'   item   '"');
    mainOutput.value  = '['   item   ']';

  };
}  
 <div class="container">
  <div class="input-box">

    <textarea name="main-input" id="main-input" class="main-input" cols="30" rows="10" placeholder="Enter Keywords Here..."></textarea>

    <p>What match types?</p>
    <div class="type-selectors">
      <p>Broad:</p> <input type="checkbox" id="broadCheck" checked onclick="updateValue()">

      <p>Modified:</p> <input type="checkbox" id="modifiedCheck" checked onclick="updateValue()">

      <p>Phrase:</p> <input type="checkbox" id="phraseCheck" checked onclick="updateValue()">

      <p>Exact:</p> <input type="checkbox" id="exactCheck" checked onclick="updateValue()">
    </div>
  </div>

  <div class="output-box">
    <textarea class="main-output" id="main-output"></textarea>
  </div>

</div>