如何实现提交按钮值变更后点击弹出对应不同的JavaScript Alert提示框？

我懂你的困扰——当按钮变成Submitted!之后，点击它完全没反应，没法弹出那个“你已经提交过邮箱啦”的提示，对吧？咱们来快速修复这个问题。

问题根源 #

你当前的myfunction()只会执行“修改按钮文字+弹出添加成功提示”的逻辑，不管按钮现在是什么状态。所以我们需要在函数里加个判断，根据按钮当前的显示文本，执行不同的操作。

修改后的完整代码 #

<!DOCTYPE html> 
<html> 
<head> 
    <title>This is the code used to create a field and submit button.</title> 
</head> 
<body> 
    <!--The below code is creating a field and submit button--> 
    <label id= "email_field_text" for="email_field"> Input your email to subscribe to funny comics and memes by yours truly</label> 
    <input id="email_field" type="email" placeholder="---&gt; Enter Your Email Here &lt;---"> 
    <input type="Submit" Id="emailsubmitbutton" style="background-color: green" value="Submit" onClick= "myfunction()" required="required"> 

    <script> 
        function myfunction() {
            const submitBtn = document.getElementById("emailsubmitbutton");
            // 判断按钮当前的状态
            if (submitBtn.value === "Submit") {
                submitBtn.value = "Submitted!";
                alert("Email address has been added to database!");
            } else {
                // 按钮已经是Submitted!状态时，弹出对应提示
                alert("You have already submitted your email address!");
            }
        }
    </script> 
</body> 
</html>

关键修改点 #

1. 先获取按钮元素并存在变量submitBtn里，避免重复调用getElementById，代码更高效。
2. 通过submitBtn.value判断按钮当前的显示文本：
   • 如果是Submit，就执行原来的逻辑（修改按钮文字+弹出添加成功提示）。
   • 如果已经是Submitted!，就弹出“你已经提交过邮箱”的提示。

这样不管按钮处于什么状态，点击它都会触发对应的正确行为啦！

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