document.getElementById innerHTML 在需要后不起作用答案

【问题标题】：document.getElementById innerHTML doesn't work after requiredocument.getElementById innerHTML 在需要后不起作用
【发布时间】：2018-04-24 11:29:25
【问题描述】：

您好，我正在尝试使用 getElementById 更改我的 html 网页中的文本。下面你可以找到我的第一次尝试

<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
    var net     = require('net');
    var sleep   = require('sleep');
    var element = document.getElementById("demo");
    element.innerHTML = "Hello JavaScript!";
</script>

此代码不起作用，因为我可以看到：

使用 JavaScript 更改文本

这个例子写“Hello JavaScript！”放入 id="demo" 的 HTML 元素中：

但是： “你好 JavaScript！” 不见了。

在 js 脚本开头更改 vars 的位置使代码工作：

<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
    var element = document.getElementById("demo");
    element.innerHTML = "Hello JavaScript!";
    var net     = require('net');
    var sleep   = require('sleep');
</script>

为什么？稍后当我将编写代码的其他部分时，我需要 sleep 和 net，但我还需要再次操作“演示”html。

【问题讨论】：

标签： require innerhtml getelementbyid

【解决方案1】：

两条线路都有问题。 require() 函数不是浏览器识别的客户端函数。通常在服务器端 NodeJS 代码中使用 require()，但是您可以添加一个 require.js 库文件...

var net     = require('net');
var sleep   = require('sleep');

将此添加到您的项目中： http://requirejs.org/docs/release/2.2.0/minified/require.js

看看这个： http://requirejs.org/docs/api.html

来源： Javascript require() function giving ReferenceError: require is not defined

【讨论】：

正如我在上面所写的，我发现问题也正是在您发现的行中。可能我犯了一些错误。我有一个非常简单的 js 代码：称为 test.js，包括两行： var net = require('net'); var sleep = require('sleep');如果使用 node test.js 启动，代码运行没有问题。如果我将该代码放在我的 html 代码中，则会出现问题。你怎么看？

【解决方案2】：

似乎有

的行

var net     = require('net');
var sleep   = require('sleep');

实际上导致了一个错误，进而导致 JS 停止评估，因此它不会到达getElementById 行。您可以在浏览器的开发者工具中的控制台中检查这一点。

【讨论】：

好的，使用浏览器的开发工具我可以看到错误：ReferenceError: require is not defined 但我认为这很奇怪，因为我在 test.js 中编写了以下代码： var net = require （'网'）; var sleep = require('sleep');当我运行它时它可以工作：node test.js
我没有做太多节点，但我认为require 是特定于节点的，它不是浏览器支持的 API（其中之一是很难喜欢 Javascript，为了我）。您可以查看developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 或查看webpack 之类的工具，这是 JS 生态系统中可用于在浏览器中加载依赖项的众多工具之一。
RequireJS 是众多工具之一（由@Laurent Mouchart 引用）