я обнаружил ошибку при загрузке простого файла .js в документе .write? - PullRequest
Новая
       44

я обнаружил ошибку при загрузке простого файла .js в документе .write?

0 голосов
/ 11 июля 2019

я написал код и обнаружил ошибку в документе. Напишите, что делать?

код равен 

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").document.write=('hi');
}
</script>
</head>
<body>

<h2>JavaScript in Head</h2>

<p id="demo"></p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

это ошибка 

Uncaught TypeError: Cannot set property 'write' of undefined
    at myFunction (test1.html:6)
    at HTMLButtonElement.onclick (test1.html:16)
myFunction @ test1.html:6
onclick @ test1.html:16

помоги мне!

1 Ответ

0 голосов
/ 11 июля 2019

Проблема в том, что вы используете вещи, которых не существует

document.getElementById() возвращает Element, и нет свойства document для Element (и даже если бы оно было, вы возвращаетесь к исходному документу).

Итак: 

document.getElementById("demo").document === undefined

вот что говорит ваша ошибка.

но его удаление не будет достаточно, поскольку Element.write()

нет

Решение состоит в том, чтобы использовать Element.innerHTML или Element.textContent, которые используются в качестве обычных строк. Разница между ними заключается в том, что innerHTML позволяет вам писать HTML-теги, которые будут отображаться, а textContent экранирует тег HTML, чтобы вывести строку, как она есть в ваших источниках.

Пример innerHTML и textContent: 

function myFunction1() {
  document.getElementById("demoTextContent").textContent = 'hi';
  document.getElementById("demoInnerHTML").innerHTML = 'hi';
}

function myFunction2() {
  content = document.getElementById("demoTextContent").textContent
  document.getElementById("demoTextContent").textContent = content + 'hi';
  // these to line can also be written as
  // document.getElementById("demoTextContent").textContent += 'hi';
  
  content = document.getElementById("demoInnerHTML").innerHTML
  document.getElementById("demoInnerHTML").innerHTML = content + 'hi';
  // these to line can also be written as
  // document.getElementById("demoInnerHTML").innerHTML += 'hi';
}

function myFunction3() {
  document.getElementById("demoTextContent").textContent = '<span style="background-color:cyan;">hi</span>';
  document.getElementById("demoInnerHTML").innerHTML = '<span style="background-color:cyan;">hi</span>';
}
#demoTextContent::before {content: "textContent: ";}
#demoInnerHTML::before{content:"innerHTML: ";}
<h2>JavaScript in Head</h2>

<p id="demoTextContent"></p>
<p id="demoInnerHTML"></p>

<button type="button" onclick="myFunction1()">Try replace text</button>
<button type="button" onclick="myFunction2()">Try append</button>
<button type="button" onclick="myFunction3()">Try replace by html code</button>

также вы написали 

write=('hi')

= может быть опечаткой, но JavaScript будет читать его как write = ('hi'), позже переведенный в write = 'hi'.

Уже было что-то подобное, потратил почти час, чтобы найти его: стр.

...