Question

我想在第二个按钮上添加一个事件监听器，当你点击它时会改变标题的字体大小，但是当我执行代码时，web控制台返回＆＃34; button2为空。＆＃34;如何使此代码有效？我不知道我的button2代码有什么问题。

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>

Answer 1

想出来！这是因为脚本代码在button2代码之前。谢谢！

为什么button2为null？ Javascript代码无法在浏览器中运行

1 个答案: