Вывод значения из текстового поля в JavaScript (проблема DOM)! - PullRequest
Новая
       8

Вывод значения из текстового поля в JavaScript (проблема DOM)!

0 голосов
/ 27 апреля 2018

В моем палиндромном контролере я не могу получить значение из текстового поля ввода HTML. Я пробовал различные методы, включая выборщики запросов. Но тем не менее работает. Ошибка в валидаторе: document.getElement (...) равен нулю.

Мне нужно найти, что не так с моим кодом. Есть ли проблема в моем DOM? 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Palindrome Checker</title>
  <link rel="stylesheet" href="ex.css" type="text/css">
  <!--<script src="ex.js"></script>-->
  <script>
    var i = document.getElementById('boiler').value;

    function check_pal() {
      rev();
      if (i == rev()) {
        alert(i + " is a palindrome");
      } else {
        alert(i + " is not a palindrome")
      }
    }

    function rev() {
      i = i + "";
      return i.split("").reverse().join("");
    }
  </script>
</head>

<body>
  <div>
    <h1>Palindrome Checker</h1>
    <p>- Word limit "18000"</p>
  </div>
  <div>
      <input type="text" id="boiler" name="boiler" /><br>
      <input type="submit" name="palcheck" id="butn" value="Is it a Palindrome?" onclick="check_pal()" />
  </div>
</body>

</html>

Я мало уверен, что моя проблема с моделью документа. Поскольку я получаю правильный результат, когда непосредственно присваиваю значение переменной . Или я получаю "undefined - это не палиндром"

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Это должно решить это: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Palindrome Checker</title>
  <link rel="stylesheet" href="ex.css" type="text/css">
  <!--<script src="ex.js"></script>-->
  <script>
    var i;

    function check_pal() {
      i = document.getElementById('boiler').value;

      rev();
      if (i == rev()) {
        alert(i + " is a palindrome");
      } else {
        alert(i + " is not a palindrome")
      }
    }

    function rev() {
      i = i + "";
      return i.split("").reverse().join("");
    }
  </script>
</head>

<body>
  <div>
    <h1>Palindrome Checker</h1>
    <p>- Word limit "18000"</p>
  </div>
  <div>
    <input type="text" id="boiler" name="boiler" /><br>
    <input type="submit" name="palcheck" id="butn" value="Is it a Palindrome?" onclick="check_pal()" />
  </div>
</body>

</html>

Теперь переменная i назначается в функции check_pal и объявляется в глобальном пространстве, чтобы обе функции могли получить к ней доступ. Я думаю, что вы должны присмотреться к scope в javascript.

0 голосов
/ 27 апреля 2018

Обновите ваш скрипт до следующего 

<script>    
    function check_pal() {
      // move this line inside the function
      var i = document.getElementById('boiler').value; 
      // rev(); // Also removed this un-necessary call
      if (i == rev(i)) {
        alert(i + " is a palindrome");
      } else {
        alert(i + " is not a palindrome")
      }
    }

   // modify function to take input as argument rather than relying on global variable
    function rev(i) { 
      i = i + "";
      return i.split("").reverse().join("");
    }
  </script>

Reasoning - Когда вы вручную присвоили значение i, оно работало правильно. Однако, когда мы пытались прочитать его из getElementById, элемент к тому времени не существовал, и он выдает ошибку JS (не может прочитать свойство 'value', равное null), следовательно, ошибку (так как я никогда не инициализировался и остается undefined). Переместите извлечение значения в функцию, где последнее значение может быть извлечено и сохранено в i.

...