Uncaught TypeError: Невозможно установить свойство 'innerHTML' с нулевой ошибкой - PullRequest
Новая
       6

Uncaught TypeError: Невозможно установить свойство 'innerHTML' с нулевой ошибкой

0 голосов
/ 04 февраля 2019

Я получил ошибку Uncaught TypeError: Cannot set property 'innerHTML' of null для приведенного ниже сценария.Я добавил теги сценария после тела.Но все равно я получаю ошибку.Я хочу показать текстовые поля на той же странице внутри div с идентификатором showTextBoxes.

Ниже приведены HTML и JS. 

function showArray(){
  var numofArr = document.getElementById("numofArr").value;
  for (let i = 0; i < numofArr; i++) {
    var a = document.writeln('<input type="text" name="Fname"><br/><br/>');
    document.getElementById('showTextBoxes').innerHTML = a;
  }
  document.writeln('<input type="submit" name="submit">');
}
<p>Number of arrays(array within 0-9)</p>
<input type="text" id="numofArr" pattern="[0-9]">
<input type="submit" onclick="showArray()" value="Submit"><br><br>
<div id="showTextBoxes"></div>

Ответы [ 3 ]

0 голосов
/ 04 февраля 2019

На самом деле document.write() и document.writeln() работают по-другому, как вы думаете.Это на самом деле очищает все document в вашем случае вы получаете null. См. Это
Если вы хотите добавить какой-то элемент к своему телу, вы можете использовать document.body.innerHTML += string. appendChild() также можно использовать, но это не для stings

function showArray(){
      var numofArr = parseInt(document.getElementById("numofArr").value);
           for (let i = 0; i < numofArr; i++) {
            var a = '<input type="text" name="Fname" /><br/><br/>'
            document.getElementById('showTextBoxes').innerHTML += a;
          }
      document.body.innerHTML += '<input type="submit" name="submit"/>'
}
<body>
   <p>Number of arrays(array within 0-9)</p>
   <input type="text" id="numofArr" pattern="[0-9]">
<input type="submit" onclick="showArray()" value="Submit"><br><br>

 <div id="showTextBoxes"></div>
0 голосов
/ 04 февраля 2019

В вашем скрипте есть несколько мест, которые мешают его правильной работе.Я расскажу о них шаг за шагом, чтобы вы могли следить за этим.

Прежде всего, вы должны избегать встроенных обработчиков событий в своем HTML по тем же причинам, по которым вы должны избегать объявлений встроенного стиля.Так что не используйте onclick=" ... " внутри вашего HTML, а вместо этого добавляйте списки событий в ваш JS.Это также дает вам возможность отменить поведение по умолчанию или остановить распространение события и тому подобное.

Следующее, вы пытаетесь использовать value изваш numofArr ввод в качестве верхних границ для вашего цикла без приведения его к Number.Поскольку элементы <input> возвращают свое значение как String, это, скорее всего, приведет к ошибке.Кроме того, вы должны использовать атрибут type="number" вместо type="text" в этом элементе.Это не требуется для этого, а просто хорошая мера.

ОК, теперь для функции showArray: вместо использования document.writeln (или document.write) создайте элементы сdocument.createElement и добавьте их в DOM с помощью appendChild.

Вы можете увидеть рабочий пример ниже.Не смущайтесь функциями byId и makeEl, они просто утилиты, поэтому вам не нужно писать document.getElementById и document.createElement все время. 

// ====== UTILITY FUNCTIONS ======
function byId (id, root = document) {
  return root.getElementById(id);
}

function makeEl (tag) {
  return document.createElement(tag);
}


// ====== PROGRAM STUFF ======
function showArray (e) {
  e.preventDefault();

  let numofArr = parseInt(byId('numofArr').value, 10);
  let output = byId('showTextBoxes');

  for (let i = 0; i < numofArr; i++) {
    let textIn = makeEl('input');
    textIn.type = 'text';
    textIn.name = 'Fname';
    
    output.appendChild(textIn);
    output.appendChild(makeEl('br'));
    output.appendChild(makeEl('br'));
  }

  let submit2 = makeEl('input');
  submit2.type = 'submit';
  submit2.value = 'Submit';
  document.body.appendChild(submit2);
}

byId('submit1').addEventListener('click', showArray, false);
<p>Number of arrays(array within 0-9)</p>
<input type="number" id="numofArr">
<input id="submit1" type="submit" value="Submit"><br><br>
<div id="showTextBoxes"></div>
0 голосов
/ 04 февраля 2019

Я думаю, что есть несколько способов, но я бы порекомендовал посмотреть на append.Примерно так должно работать: 

function showArray(){
      var numofArr = document.getElementById("numofArr").value;
           for (let i = 0; i < numofArr; i++) {
              var textBox = document.createElement("input");
              var enter = document.createElement("br");
              document.getElementById('showTextBoxes').append( textBox );
              document.getElementById('showTextBoxes').append( enter );
          }
  }
...