Muszę zbudować kalkulator używając tylko JS, bez HTML. Tworzę podstawowe pola wejściowe dla liczb, ale nie mogę dołączyć ich do DOM. Otrzymuję następujący błąd:

> Uncaught TypeError: Cannot read property 'append' of null.

To jest mój kod:

var firstInput = document.createElement('input');
firstInput.setAttribute("type", "text");
firstInput.innerHTML = "";
document.body.append(firstInput);

WYJAŚNIENIE: Istnieje plik HTML i pracuję nad zewnętrznym plikiem Javascript, który jest powiązany z HTML. Jednak nie pozwalają mi tworzyć elementów z HTML i pobierać ich za pomocą JavaScript. Elementy mogę tworzyć tylko za pomocą JS.

Co ja robię źle?

0
Vinyet 19 listopad 2019, 23:11
Zamierzam zgadnąć, że twój kod znajduje się w <head> bez zawinięcia w onload, więc próbujesz uzyskać dostęp do <body>, zanim on istnieje.
 – 
Tyler Roper
19 listopad 2019, 23:13
 – 
norbitrial
19 listopad 2019, 23:14
2
Używanie „DOM” z „brakiem HTML” nie ma sensu. DOM to narzędzie do używania JavaScript do uzyskiwania dostępu, nawigacji i modyfikowania HTML. Bez HTML nie ma DOM.
 – 
Andrew Ray
19 listopad 2019, 23:16
Wyobrażam sobie, że OP oznacza, że ​​używają wyłącznie JS do konstruowania elementów strony, w przeciwieństwie do strony „nie będącej HTML”. To powiedziawszy, nie powinniśmy zgadywać, więc twój punkt widzenia pokazuje, że pytanie z pewnością przydałoby się doprecyzować.
 – 
Tyler Roper
19 listopad 2019, 23:17
@TylerRoper, w takim razie nie jestem pewien, dlaczego chcesz to zrobić, ale wydaje mi się, że to tylko kolejne zadanie domowe, które wykonuje okropną robotę zbliżoną do wszystkiego, co przypomina prawdziwy świat. Myślałem, że mamy do czynienia z Node lub podobnym „bezgłowym” JS.
 – 
Andrew Ray
19 listopad 2019, 23:22

1 odpowiedź

Kiedy kod jest wykonywany, treść nie musi być jeszcze ładowana. Dobrą praktyką jest poczekanie, aż DOM będzie gotowy, zanim użyjesz go w jakikolwiek sposób.

Twój skrypt powinien być umieszczony na samym końcu treści HTML.

(function() {
  // The DOM will be available here
  var firstInput = document.createElement('input');
  firstInput.setAttribute("type", "text");
  firstInput.innerHTML = "";
  document.body.append(firstInput);
})();

Ta odpowiedź zawiera więcej informacji o tym, jak to działa.

1
SystemGlitch 19 listopad 2019, 23:16
1
Kluczową kwestią jest to, że tagi skryptu z powyższym fragmentem kodu są umieszczane tuż przed tagiem końcowym treści () i po wszystkich innych znacznikach HTML.
 – 
T. Junghans
19 listopad 2019, 23:28