JavaScript/CSS样式切换代码报错：TypeError问题排查求助

问题情况 #

点击按钮切换CSS样式表时功能失效，控制台抛出TypeError: cannot read properties of null (reading 'addEventListener')错误，且无法修改现有index.html文件，仅能单独编写JS文件。

现有index.html代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Assignment 4</title>  <link id="styleSheet" href="styleA.css" rel="stylesheet" type="text/css">
  
    <script src="styler.js"></script>
</head>

<body>
    <form>
        <button id="styleA" type="submit">Use styleA</button>
        <button id="styleB" type="submit">Use styleB</button>
    </form>
    <article>
        <h1>OSU Beaver Store - CS 290 Version</h1>
            <p>Catering to All Your Beaver-Gear Needs</p>
        <div>
            <table>
                <caption>Our Most Popular Items</caption>
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Orange Beaver Polo</td>
                        <td>49.00</td>
                    </tr>
                    <tr>
                        <td>3 Pack Beaver Socks</td>
                        <td>28.00</td>
                    </tr>
                    <tr>
                        <td>Orange Beavers Hat</td>
                        <td>32.50</td>
                    </tr>
                    <tr>
                        <td>Waterproof Jacket</td>
                        <td>65.55</td>
                    </tr>
                </tbody>
            </table>
            </div>
            <div id="beaver-store">
                <a href="https://osubeaverstore.com/">Visit The Official Beaver Store</a>
            </div>
    </article>


    <div>
        <span id="o">O</span><span id="s">S</span><span id ="u">U</span>
    </div>
    
</body>

</html>

原styler.js代码 #

"use strict";
let aLink= document.querySelector("link");
const aButton = document.getElementById("styleA");
const bButton = document.getElementById("styleB");

function changeToA(){
    preventDefault();
    aLink.setAttribute('href', 'styleB.css');
}

 function changeToB(){
    aLink.setAttribute('href', 'styleB.css');
}

 aButton.addEventListener("click",changeToA);
 bButton.addEventListener("click",changeToB);

问题分析 #

1. 脚本放在<head>标签中，执行时<body>内的按钮元素还未加载完成，导致getElementById返回null，无法绑定事件监听
2. changeToA函数未传入事件对象就调用preventDefault()，会触发额外报错
3. changeToA函数逻辑错误，将样式表错误设置为styleB.css，不符合按钮功能预期

修正后的styler.js代码 #

"use strict";

// 等待DOM完全加载完成后再执行元素操作
document.addEventListener('DOMContentLoaded', function() {
    // 通过ID精准获取样式表元素
    const styleLink = document.getElementById("styleSheet");
    const styleAButton = document.getElementById("styleA");
    const styleBButton = document.getElementById("styleB");

    function changeToA(event) {
        // 阻止表单提交的默认行为，避免页面刷新
        event.preventDefault();
        styleLink.setAttribute('href', 'styleA.css');
    }

    function changeToB(event) {
        event.preventDefault();
        styleLink.setAttribute('href', 'styleB.css');
    }

    styleAButton.addEventListener("click", changeToA);
    styleBButton.addEventListener("click", changeToB);
});

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