为何我的jQuery按钮交互程序无法正常运行？

核心错误点 #

• 变量属性误用：clickCount是普通数字变量，不存在value属性，所有判断条件里的clickCount.value需直接改为clickCount。
• 选择器不匹配：页面按钮的class为button，代码中用$("#button")（ID选择器）无法选中元素，需替换为$(".button")（类选择器）。

修正后的完整代码 #

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    </head>
    <body>
        <button class="button"> dont press the button </button>
        <button class="button" style="display:none;"> another button </button>
        <p id="warning"> </p>
        
        <script>
            var clickCount = 0;
            $(".button").click(function(){
                clickCount += 1;
                console.log(clickCount);
                if (clickCount == 1) {
                    $("#warning").text("I said DONT PRESS!");
                }
                else if (clickCount == 2) {
                    $("#warning").text("Come on!");
                }
                else if (clickCount == 3) {
                    $("#warning").text("Your really getting on my nerves right now.");
                }
                else if (clickCount == 4) {
                    $("#warning").text("Is this all you do?");
                }
                else if (clickCount == 5) {
                    $("#warning").text("ALRIGHT, PLAYTIMES OVER! NO MORE BUTTON!");
                    $(".button").css({"display":"none"});
                }
                else if (clickCount == 6) {
                    $("#warning").text("Sigh...");
                    $(".button").css({"display":"block"});
                }
                else if (clickCount == 7) {
                    $("#warning").text("Alright then... how about this for a challenge?");
                    $(".button").css({"display":"block"});
                }
            })
        </script>
    </body>
</html>

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