从教程复制的Javascript代码运行失败、浏览器显示空白问题求助

本地浏览器打开空白的修复 #

核心问题为DOM属性拼写错误：代码中使用的textContext是无效属性，正确的修改元素文本内容的属性名为textContent。
修改对应行代码即可：

// 错误写法
// drawTo.textContext = "Hello World";
// 正确写法
drawTo.textContent = "Hello World";

修复后的完整代码如下：

<html>
<body>
<h1>

</h1>
<script>

//alert("Hello World");
//console.log("Hi world");
let drawTo = document.querySelector('h1');
drawTo.textContent = "Hello World";
</script>
</body>
</html>

修改后直接用浏览器打开本地HTML文件，即可正常显示预期的Hello World文本。

在线IDE JSX报错原因 #

该报错与你的代码本身无关，是你使用的在线IDE默认将当前文件归类为React框架的JSX项目文件，使用JSX语法规则解析原生HTML代码才触发了报错。你只需要在在线IDE中创建纯原生HTML/JS项目（不要选择React/Vue等框架类项目模板），再粘贴代码运行即可。

内容的提问来源于stack exchange，提问作者mintymoes