0

Почему не срабатывает методы split и join? Через отладчик Chrome не получается определить причину.

var submit = document.getElementById('submit');
submit.addEventListener('click', handler);

function handler() {
  var data = document.getElementById('in_1c').value;
  var position = document.querySelector('.container');
  if (data != 0) {
    position.insertAdjacentHTML('beforeEnd', `
        <div class="col-sm-12">
            <p class="data">${data.split(' ').join('\n').toUpperCase()}</p>
        </div>
      `);
  } else {
    var warningEl = document.createElement('div');
    warningEl.setAttribute('class', 'warning');
    var message = document.createTextNode('Пожалуйста, заполните соотвествующие поля для обработки!');
    warningEl.appendChild(message);
    var e = document.getElementsByClassName('container')[0];
    e.appendChild(warningEl);
  }
}


function resetValue1() {
  textArea = document.getElementById('in_1c');
  textArea.value = "";

}
<div class="container">
  <!--<form action="">-->
  <div class="row">
    <div class="col-sm-6">
      <!--d-flex-->
      <div class="form-group">
        <label for="in_1c">(Введите 2 раза, например: RS-CS18AX/RU-18AX1)</label>
        <textarea name="" id="in_1c" cols="30" rows="20" class="form-control"></textarea>
        <p class="text-right mt-1"><input type="button" class="btn btn-secondary btn-sm" onClick="resetValue1();" value="Очистить"></p>
      </div>
    </div>
    <div class="col-sm-12 text-left"><button type="submit" class="btn btn-primary" id="submit">Отправить</button></div>
  </div>

1 ответ 1

2

Почему вы решили, что split или join не работают? Они работают.

Если нужно выводить каждое слово в отдельной строке, то лучше это сделать через тег p.

Пример.

var submit = document.getElementById('submit');
submit.addEventListener('click', handler);

function handler() {
  var data = document.getElementById('in_1c').value;
  var position = document.querySelector('.container');
  if (data != 0) {
    position.insertAdjacentHTML('beforeEnd', `
        <div class="col-sm-12">
            ${data.split(/\s/).map(m=>`<p class="data">${m.toUpperCase()}</p>`).join('')}
        </div>
      `);
  } else {
    var warningEl = document.createElement('div');
    warningEl.setAttribute('class', 'warning');
    var message = document.createTextNode('Пожалуйста, заполните соотвествующие поля для обработки!');
    warningEl.appendChild(message);
    var e = document.getElementsByClassName('container')[0];
    e.appendChild(warningEl);
  }
}


function resetValue1() {
  textArea = document.getElementById('in_1c');
  textArea.value = "";

}
<div class="container">
  <!--<form action="">-->
  <div class="row">
    <div class="col-sm-6">
      <!--d-flex-->
      <div class="form-group">
        <label for="in_1c">(Введите 2 раза, например: RS-CS18AX/RU-18AX1)</label>
        <textarea name="" id="in_1c" cols="30" rows="20" class="form-control"></textarea>
        <p class="text-right mt-1"><input type="button" class="btn btn-secondary btn-sm" onClick="resetValue1();" value="Очистить"></p>
      </div>
    </div>
    <div class="col-sm-12 text-left"><button type="submit" class="btn btn-primary" id="submit">Отправить</button></div>
  </div>

9
  • @ikar А что вы подразумеваете под не рабтает? А здесь сниппет работает? 17 апр 2018 в 7:36
  • Имел ввиду что insertAdjacentHTML() не выводит данные, которые отформатированы с помощью split() и join(). У меня всё в одну строчку, а надо на разных.
    – ikar
    17 апр 2018 в 7:40
  • В вашем примере работает правильно.
    – ikar
    17 апр 2018 в 7:41
  • 1
    Так они не будут на разных, html \n не учитывает. Делайте или тег pre или вставляйте разделители br или вставляйте все в абзацы p. 17 апр 2018 в 7:42
  • 1
    @ikar Дело в том, что \n!==' '. Если хотите учиывать все пробельные символы, то можно воспользоваться регулярныи выражением /\s/. Я обновил ответ. 17 апр 2018 в 8:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.