获胜者的 Javascript 警报消息，同时保持得分

Question

我是第一学期的学生，正在开发一个简单的应用程序，可以为两个人记录分数。我已经到了可以添加名称的地步，可以为玩家之间的“比赛”设置一个数字，以及一次添加一个点的按钮。我想为到达集合的任何玩家弹出警报 “比赛到”的数字表明，x 是赢家！或者 y 是赢家！取决于谁赢了。我试图编写一个 if 语句，但失去了部分正在运行的 javascript 的功能（即单击提交按钮时设置的比赛编号不会保存） application page

Application page after inputs

这是我使用的html...

    <article class="article1">
                <form id="player1"  method="post">
                    <h2>Player 1</h2> <input type="text" name="name" id="inputplayer" value="Player 1">
                    <h1 id="p1"></h1>
                    <button id="getname">Submit</button>
                    <br>
                    <br>
                    <br>
                    <button id="setscore1">Add Point</button>
                </form>
            </article><!-- end of player 1 form-->

            <article class="article2">
                <form id="middle" method="post">
                    <h1>Race to</h1><input id="inputrace" type="number" name="Race To" value="0">
                    <button id="setrace">Submit</button>
                    <h1 id="getrace"></h1>
                    <br>
                    <h1>Scores</h1>
                    <h3 id="score1">Player 1</h3>
                    <h3 id="getscore1"></h3>
                    <br>
                    <h3 id="score2">Player 2</h3>
                    <h3 id="getscore2"></h3>
                </form>
            </article><!--end of scores article-->

            <article class="article3">
                <form id="player2"  method="post">
                    <h2>Player 2</h2><input id="inputplayer2" type="text" name="name" value="Player 2">
                    <h1 id="p2"></h1>
                    <button id="getname2">Submit</button>
                    <br>
                    <br>
                    <br>          
 <button id="setscore2">Add Point</button>
    </form>

这是我的 javascript，它允许我更改玩家名称并添加分数....

<script>
   //Player 1 Name
        document.getElementById('getname').addEventListener('click',funcp1, false);
        function funcp1() {
            var playerName = document.getElementById('inputplayer').value;
            document.getElementById("p1").innerHTML = playerName;
            document.getElementById('score1').innerHTML = playerName;
            document.getElementById('inputplayer').remove();
            document.getElementById('getname').remove();
            event.preventDefault();
        }
        //Player 2 Name
        document.getElementById('getname2').addEventListener('click',funcp2, false);
        function funcp2() {
            var playerName = document.getElementById('inputplayer2').value;
            document.getElementById("p2").innerHTML = playerName;
            document.getElementById('score2').innerHTML = playerName;
            document.getElementById('inputplayer2').remove();
            document.getElementById('getname2').remove();
            event.preventDefault();
        }
        //Player 1 score
        var number = document.getElementById('getscore1').innerHTML; document.getElementById('setscore1').addEventListener('click',function(){
            number++;
            document.getElementById("getscore1").innerHTML = number;
            event.preventDefault();        
        }, false);

        //Player 2 score
        var numberP2 = document.getElementById('getscore2').innerHTML; document.getElementById('setscore2').addEventListener('click',function(){
            numberP2++;
            document.getElementById("getscore2").innerHTML = numberP2;
            event.preventDefault();   
        }, false);
        //Race and score display 
        document.getElementById('setrace').addEventListener('click',funcr, false);
        function funcr() {
            var raceTo = document.getElementById('inputrace').value;
            document.getElementById("getrace").innerHTML = raceTo;
            document.getElementById('inputrace').remove();
            document.getElementById('setrace').remove();
            event.preventDefault();
        }
</script>

如果我使用了令人困惑的标签或遗漏了任何重要的东西，可以帮助别人理解我想要完成的事情，请提前道歉。此外，在这一点上，javascript 对我来说仍然很困惑，因为我只有几周的经验。

Answer 1

您应该尝试搜索已经在线的解决方案，通过简单的 google 搜索可以找到许多与您的问题相关的内容：

Using alerts

Using change event listeners

更改事件与单击事件非常相似，它只是侦听给定字段的更改。

您所描述的实现非常简单，您想在保存分数的字段上设置一个更改事件侦听器