При стандартных пунктах все кнопки работают но как только пишу в textarea что то свое сразу ничего не работает. В чём проблема?

Question

html:
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Обработка массива</title>
        <link href="order.css" type="text/css" rel="stylesheet" />
    </head>

    <body>
        <h1>Обработка массива</h1>

        <div>
            <textarea rows="18" cols="100" id="textArea">
                пункт 1
                пункт 2
                пункт 3
                пункт 4

                пункт 5
                пункт 6

                пункт 7
             </textarea>
        </div>

        <div>
            <button onclick="clean();">Очистить</button>
            <button onclick="textUp();">Верхний регистр</button>
        </div>

        <script src="order.js" type="text/javascript"></script>
    </body>
</html>

JS:
//Функция очистки
function clean() {
  document.getElementById('textArea').innerHTML = "";
}

//Функция верхнего регистра
function textUp() {
  let text = document.getElementById('textArea').value;
  let arr = text.split(' ');
  let arr2 = [];
  for (let i = 0; i < arr.length; i++) {
    arr2.push(arr[i].toUpperCase())
  }
  document.getElementById('textArea').innerHTML = arr2;
  delete text;
  delete arr;
  delete arr2;
  delete i;
}

Answer 1

function clean() {
  // изменяем value, а не innerHTML
  document.getElementById('textArea').value = "";
}

//Функция верхнего регистра
function textUp() {
  // Фактически есть код можно сделать в одну строку, ведь ваша конкатенация строк работает неправильно
  
  // let text = document.getElementById('textArea').value;
  // let arr = text.split(' ');
  // let arr2 = [];
  // for (let i = 0; i < arr.length; i++) {
    // arr2.push(arr[i].toUpperCase())
  // }
  // document.getElementById('textArea').value = arr2;
  // Бесполезно в JS, все переменные локальной видимости уничтожаются после уничтожения контекста вызова, то есть после завершения работы функции (если не в замыкании).
  // delete text;
  // delete arr;
  // delete arr2;
  // delete i;
  
  const textarea = document.getElementById('textArea');
  textarea.value = textarea.value.toUpperCase();
}

<h1>Обработка массива</h1>

<div>
    <textarea rows="18" cols="100" id="textArea">
        пункт 1
        пункт 2
        пункт 3
        пункт 4

        пункт 5
        пункт 6

        пункт 7
     </textarea>
</div>

<div>
    <button onclick="clean();">Очистить</button>
    <button onclick="textUp();">Верхний регистр</button>
</div>

БЛОГ НА HUSL

При стандартных пунктах все кнопки работают но как только пишу в textarea что то свое сразу ничего не работает. В чём проблема?

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