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

您应该尝试在线搜索解决方案，有一些与您的问题相关的简单谷歌搜索：

Using alerts

Using change event listeners

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

您所描述的内容有一个非常简单的实现，您希望在包含分数的字段上设置更改事件侦听器

为获胜者提供Javascript警报消息，同时保持得分

1 个答案: