HTML5. Как передать массив строк в функцию javascript?

Question

Ввожу информацию через поле ввода, которое нужно передать в функцию js в качестве массива строк. Однако получается только отправить строку. Пробовал ее преобразовать в массив, но не выходит. Как мне сразу отправить в функцию массив строк?

<section>
<html>
<head>    <meta charset="windows-1251" />
</head>
<body>
    <p>Введите строки</p>
     <form method="get">
        <input type="text" name="string" id="text_string" />
        <br />
        <input type="button" name="send" value="Отправить" onclick=GetString(text_string.value) />

        <script language="JavaScript">
            function GetString(massiv) {
                let num = 0;
                let tp;
                for (let i = 0; i < massiv.length; i++) {
                    if (massiv[i] == " ") {
                        num++;
                    }
                }
                let massiv_string = new Array(num + 1);
                let tmp;
                for (let i = 0; i < massiv.length; i++) {
                    if (massiv[i] != " ") {
                        tmp += massiv[i];
                    } else {
                        massiv_string.push(tmp);
                        tmp = "";
                    }
                }
                for (let i = 0; i < massiv_string.length; i++) {
                    getMessage(massiv_string[i]);
                }
            }
            function getMessage(word) {
                alert(word);
            }
        </script>

    </form>
    
</body>
</html>

Answer 1

Ошибка тут:

let massiv_string = new Array(num + 1);
...
massiv_string.push(tmp);

Создается массив длины num + 1 с пустыми элементами. push продолжает сверху добавлять элементы, но индексы от 0 до num + 1 неизменно остаются пустыми.

К тому же, в JS для создания массива не нужно заранее знать его размер: предварительный подсчет пробелов лишний.

Исправленный вариант:

function getString(str) {
  let arr = [""]; // Создается массив с одним элементом - пустой строкой
  let index = 0; // Указывает на номер элемента в массиве, с которым сейчас работаем
  
  for (let i = 0; i < str.length; i++) {
    if (str[i] == " ") {
      arr[++index] = ""; // Увеличивает index,
      // заодно под этим номером создает пустую строку в массиве.
      continue;
    }
    
    arr[index] += str[i];
  }
  
  for (let i = 0; i < arr.length; i++) {
    // ненужный перебор, можно было вызывать в предыдущем цикле. Но пусть будет
    getMessage(arr[i]);
  }
}

function getMessage(word) {
  console.log(word);
}

<form method="get">
  <input id="text_string" value="test1 test2 test3">
  <input type="button" value="Отправить" onclick="getString(text_string.value)">
</form>

И более "правильный" вариант :D

let text = document.querySelector("#text");
let btn = document.querySelector("#btn");

btn.addEventListener("click", function() {
  text.value.split(" ").forEach(log);
  // split разбивает строку в массив, по переданному разделителю.

  // forEach - встроенный метод перебора массива.
  // Берет функцию и вызывает её для каждого элемента. А как первый параметр
  // функции (оно же word) == передается очередной элемент массива.
});

function log(word) {
  console.log(word);
}

<form method="get">
  <input id="text" value="test1 test2 test3">
  <input id="btn" type="button" value="Отправить">
</form>

Формально, через onclick можно было сократить всё до одной строчки, но если хорошо поискать, можно найти эдак 10 причин, почему не надо использовать onclick в HTML

*PS: Обычные функции не принято называть с большой буквы. С большой буквы называют функции-конструкторы и классы.

БЛОГ НА HUSL

HTML5. Как передать массив строк в функцию javascript?

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