记录分数时向获胜者发送Javascript警报消息

我是第一学期的学生，正在编写一个简单的应用程序，可以为两个人保留分数。我已经到了可以添加名字的地步，可以为玩家之间的“比赛”设置一个数字，以及一次添加一个点的按钮。我想要一个警报弹出，无论哪个球员到达集合 “比赛到”的数字表明，x是赢家！否则你就是赢家！取决于谁赢了。我试图编写一个if语句，但失去了部分正在运行的javascript的功能（即，当单击submit按钮时，设置的比赛号码将不会保存）

这是我使用的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>

玩家1
提交






加点
竞相
提交


分数
玩家1


玩家2
玩家2
提交






加点

这是我的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>

//玩家1姓名
document.getElementById（'getname'）。addEventListener（'click'，funcp1，false）；
函数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（）；
}
//玩家2姓名
document.getElementById（'getname2'）。addEventListener（'click'，funcp2，false）；
函数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（）；
}
//球员1分
var number=document.getElementById（'getscore1'）.innerHTML；document.getElementById（'setCore1'）。addEventListener（'click'，function（）{
数字++；
document.getElementById（“getscore1”）.innerHTML=number；
event.preventDefault（）；
}，假）；
//球员2得分
var numberP2=document.getElementById（'getscore2'）.innerHTML；document.getElementById（'setCore2'）。addEventListener（'click'，function（）{
数字2++；
document.getElementById（“getscore2”）.innerHTML=numberP2；
event.preventDefault（）；
}，假）；
//比赛和成绩显示
document.getElementById（'setrace'）。addEventListener（'click'，funcr，false）；
函数funcr（）{
var raceTo=document.getElementById（'inputrace'）.value；
document.getElementById（“getrace”）.innerHTML=raceTo；
document.getElementById（'inputrace'）.remove（）；
document.getElementById（'setrace'）.remove（）；
event.preventDefault（）；
}

---

如果我使用了令人困惑的标签或遗漏了任何重要的内容，这将有助于他人理解我试图实现的目标，请提前道歉。而且，在这一点上，javascript对我来说仍然非常混乱，因为我只有几周的经验

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

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

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