onclick点击无输出：ADD药物计算器脚本故障排查与修复

核心问题 #

你的代码存在事件绑定逻辑错误：在init函数中，你写了document.getElementById("button").onclick = convertRitalinLA()，这里的convertRitalinLA()会在页面初始化时立即执行函数，随后把函数的返回值（此处为undefined）赋值给按钮的点击事件。这就导致点击按钮时，没有对应的回调函数被触发，页面自然没有任何输出。

修复步骤 #

将init函数里的事件绑定代码修改为：

document.getElementById("button").onclick = convertRitalinLA;

去掉函数后的括号，这样是把函数本身的引用赋值给onclick，只有当按钮被点击时，才会执行convertRitalinLA函数。

修复后的完整代码 #

function convertRitalinLA () {
    var convertMedications = document.getElementById("convertMedications").value;
    var dosages = document.getElementById("dosages").value;
    var toTheseMedications = document.getElementById("toTheseMedications").value;
    var placeholder = document.getElementById("placeholder");

    if (convertMedications === "Ritalin LA") {
        if (toTheseMedications === "Ritalin") {
            if (dosages === "10mg") {
                console.log("10mg")
                placeholder.innerHTML = "10mg"
            } else if (dosages === "20mg") {
                console.log("20mg")
                placeholder.innerHTML = "20mg"
            } else if (dosages === "30mg") {
                console.log("30mg")
                placeholder.innerHTML = "30mg"
            } else if (dosages === "40mg") {
                console.log("40mg")
                placeholder.innerHTML = "40mg"
            } else if (dosages === "60mg") {
                console.log("60mg")
                placeholder.innerHTML = "60mg"
            } else {
                // 处理未匹配的剂量
                placeholder.innerHTML = "不支持该剂量转换";
            }
        } else if (toTheseMedications === "Ritalin LA") {
            console.log("Error.")
            placeholder.innerHTML = "Error."
        } else {
            // 处理未匹配的目标药物
            placeholder.innerHTML = "不支持转换到该药物";
        }
    } else {
        // 处理未匹配的源药物
        placeholder.innerHTML = "不支持该源药物转换";
    }
}

function init () {
    document.getElementById("button").onclick = convertRitalinLA;
}

window.onload = init;

额外优化建议 #

• 增加对未匹配情况的处理（比如上述代码中添加的else分支），避免用户操作后无任何反馈
• 可以使用addEventListener替代直接赋值onclick，语法如下：

  document.getElementById("button").addEventListener('click', convertRitalinLA);
  

  这种方式支持给同一个元素绑定多个同类型事件，更灵活。

内容的提问来源于stack exchange，提问作者Tilly's Spam Emails