为什么我编写的JavaScript交互代码无法正常运行？

一、HTML代码中的问题 #

• 缺失订阅复选框：你提到了"subscribe"，但HTML里没有对应的<input type="checkbox">元素，导致JS里误把提交按钮当成了复选框。
• 提交按钮ID与JS不匹配：HTML中按钮的id是myCheckBox，但JS里试图获取myButton元素，事件绑定失败，点击按钮不会触发函数。
• 存在无效标签：<p>body></p>是错误的代码片段，属于无效的HTML标签，应该删除或修正为正确的闭合标签（比如</body>）。

二、JavaScript代码中的问题 #

• 事件绑定目标错误：document.getElementById("myButton")找不到对应元素，因为HTML里没有这个id的元素，导致整个点击事件无法触发。
• 错误获取元素类型：myCheckBox被赋值为按钮元素，但按钮没有checked属性，所以关于订阅状态的判断逻辑完全失效。

修正后的代码示例 #

修正后的HTML #

<!-- 添加订阅复选框 -->
<label for="subscribe">subscribe</label>
<input type="checkbox" id="subscribe">
<br>
<label for="visaBtn">Visa</label>
<input type="radio" name="card" id="visaBtn">
<label for="mastercardBtn">MasterCard</label>
<input type="radio" name="card" id="mastercardBtn">
<label for="paypalBtn">Paypal</label>
<input type="radio" name="card" id="paypalBtn"><br>
<!-- 修改按钮id为myButton，和JS对应 -->
<button id="myButton">submit</button>
<script src="index.js"></script>

修正后的JavaScript #

// 绑定正确的按钮元素
document.getElementById("myButton").onclick = function(){
    // 获取订阅复选框
    const subscribeCheckbox = document.getElementById("subscribe");
    const visaBtn = document.getElementById("visaBtn");
    const mastercardBtn = document.getElementById("mastercardBtn");
    const paypalBtn = document.getElementById("paypalBtn");

    // 订阅状态判断
    if(subscribeCheckbox.checked){
        console.log("You are subscribed");
    } else {
        console.log("You are NOT subscribed!");
    }

    // 支付方式判断
    if(visaBtn.checked){
        console.log("You are paying with a Visa!");
    } else if(mastercardBtn.checked){
        console.log("You are paying with a Mastercard!");
    } else if(paypalBtn.checked){
        console.log("You are paying with a Paypal!");
    } else {
        console.log("You must select a payment type!");
    }
}

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