为什么按钮2是空的？Javascript代码在浏览器中不工作_Javascript_Dom

为什么按钮2是空的？Javascript代码在浏览器中不工作

javascript dom

为什么按钮2是空的？Javascript代码在浏览器中不工作,javascript,dom,Javascript,Dom,我想在第二个按钮中添加一个事件侦听器，当您单击它时，它会更改标题的字体大小，但是当我执行代码时，web控制台会返回“button2为null”。如何使此代码正常工作？我不知道我的按钮代码出了什么问题 const myHeading = document.getElementById('myHeading'); const myButton = document.getElementById('myButton'); const myTextInput = document.getElementB

我想在第二个按钮中添加一个事件侦听器，当您单击它时，它会更改标题的字体大小，但是当我执行代码时，web控制台会返回“button2为null”。如何使此代码正常工作？我不知道我的按钮代码出了什么问题

const myHeading = document.getElementById('myHeading');
const myButton = document.getElementById('myButton');
const myTextInput = document.getElementById("myTextInput")
const FontSize = document.getElementById("myFontSize");
const button2 = document.getElementById("button2");

myButton.addEventListener("click", () => {
    myHeading.style.color = myTextInput.value;
});

button2.addEventListener("click", () => {
    myHeading.style.fontSize = FontSize.value;
});

html代码：

!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title> Javascript </title>
    </head>

    <body>
    <h1 id="myHeading"> Javascript </h1>
    <p> making a web page interactive </p>
    <input type="text" id="myTextInput">
    <button id="myButton"> Change headline color </button>
    <script src="dom.js"> </script>
    <input type="text" id="myFontSize">
    <button id="button2"> Change Font Size </button>
</body>
</html>

！DOCTYPE html>
Javascript
Javascript
使网页具有交互性
更改标题颜色
更改字体大小

算出了！这是因为脚本代码在button2代码之前。

谢谢

显示HTML代码。但我敢打赌，这是因为在执行脚本时，id为

button2

的按钮不存在。确保在

DomContentLoaded

之后加载脚本。感谢之前加载脚本的是bc。