主页 / 问题 / 1587337
Accepted
Andrey Mozharov
Asked:2024-07-16 19:59:01 +0800 CST2024-07-16 19:59:01 +0800 CST

JavaScript 中函数和块的可见性

  • 772

问题实质：

有两个脚本：head.js 和 body.js，根据名字分别在 end<head>和 end调用<body>。 head.js 包含一个函数quote(text)，该函数应该使用 更改块的内容id="quote"。在body.js中调用该函数，但出现错误：Uncaught TypeError: Cannot set properties of null (setting 'innerText')- 即此功能的块不可见。请解释一下为什么它会这样工作，并且不要把残废的人踢得太狠（我是一个业余爱好者，对js的经验很少）。

只是在同一个 head.js 中，还有另一个函数也可以更改页面的内容（块），但是是从软件本身<main>内部调用的，并且一切都与它完美配合，但这里我不明白发生了什么， 因为即使在它需要并且应该看到它的块之后也会调用该函数，但是，但是......<main>onclick="..."null

代码：

head.js

function quote(text) {
    document.querySelector("#quote").innerText = text;
}

body.js

quote("Какой-то текст...");

索引.html

<!DOCTYPE html>
<html>

<head>
    <script src="./head.js"></script>
</head>

<body>
    <header>
        <div id='head'><div id="quote"></div></div>
    </header>
    <main>
    </main>
    <script src="./body.js"></script>
</body>

</html>
javascript

1 个回答

  1. Best Answer

    请解释为什么它会这样工作。

    我将用带有注释的示例来说明答案。我希望一切都清楚。

    <script>
function quote(text) {
  document.querySelector("#quote").innerText = text;
}
/*
Это работать не будет, т.к. еще нет нужного элемента
quote('Ok')
*/
// Вот так будет работать
document.addEventListener('DOMContentLoaded', _ => quote('Ok'))
</script>
<p id='quote'></p>
<!-- Это работает, т.к. на момент нажатия на кнопку уже все элементы есть на странице --->
<button onclick='quote("Тест")'>Тест</button>

    这是你的例子...

    <!DOCTYPE html>
<html>

<head>
<script>
function quote(text) {
  document.querySelector("#quote").innerText = text;
}
</script>    
</head>

<body>
    <header>
        <div id='head'><div id="quote"></div></div>
    </header>
    <main>
    </main>
<script>
quote('Ok')
</script>
</body>

</html>

    那里一切正常。

    这意味着您还没有告诉我们有关页面构成的所有信息。也许您的内容也是动态创建的。那。调用该函数时，元素可能尚未出现在页面上。

    • 1

相关问题