Question

I am trying to get two buttons per player that add one or subtract one to their life total and display it on a webpage.

<HTML>
<head>
    <link href="style.css" rel="stylesheet">
    <TITLE>MTG Life Counter</TITLE>
</head>
<BODY>
    <h1 class = "Head">Magic: The Gathering Life Counter App</h1>
    <p><a href="homepage.html" alt="Back To Home"><img src="logo.png"></a></p>
    <h2>Player 1</h2>
    <div>
        <a class = "button" id = "player1sub">-</a>
        <p id='player1'></p>
        <a class = "button" id = "player1add">+</a>
    <h2>Player 2</h2>
    <div>
        <a class = "button" id = "player2sub">-</a>
        <p id='player2'></p>
        <a class = "button" id = "player2add">+</a>
    </div>
</BODY>
<SCRIPT>
    function sub (life,player){
        life--;
        if (player == 1){
            document.getElementById('player1').innerHTML = player1Life;
        }
        else {
            document.getElementById('player2').innerHTML = player2Life;
        }
    };
    function add (life,player){
        console.log("AAAAA");
        life++;
        if (player == 1){
            document.getElementById('player1').innerHTML = player1Life;
        }
        else {
            document.getElementById('player2').innerHTML = player2Life;
        }
    };
    var player1Life = 20;
    var player2Life = 20;
    var p1sub = document.getElementById("player1sub");
    var p1add = document.getElementById("player1add");
    var p2sub = document.getElementById("player2sub");
    var p2add = document.getElementById("player2add");
    p1sub.onclick = sub(player1Life,1);
    p1add.onclick = add(player1Life,1);
    p2sub.onclick = sub(player2Life,2);
    p2add.onclick = add(player2Life,2);

    window.onload = function(){
        document.getElementById('player1').innerHTML = player1Life;
        document.getElementById('player2').innerHTML = player2Life;
    };
</SCRIPT>
</HTML>

I see the buttons log AAAA in console two times when I load the webpage, but I am assuming that is an initial setup. When I click the button there is not console print and the number does not change.

Answer 1

box-model

您分配给p1sub.onclick = sub(player1Life,1);的值必须是功能。

在这里，您立即调用onclick函数并将其返回值传递给sub。

onclick没有sub语句，因此会返回return。

undefined不是函数。

Answer 2

您的问题的解决方案是：

p1sub.onclick = function() {sub(player1Life,1);}
p1add.onclick = function() {add(player1Life,1);}
p2sub.onclick = function() {sub(player2Life,2);}
p2add.onclick = function() {add(player2Life,2);}

Answer 3

我认为这是你想要的代码吗

＆＃13;

var player1Life = 20;
var player2Life = 20;
function sub (player){
        if (player == 1){
            player1Life--;
            document.getElementById('player1').innerHTML =             player1Life;
        }
        else {
            player2Life--;
            document.getElementById('player2').innerHTML =              player2Life;
        }
    };
    function add (player){
        if (player == 1){
         player1Life++;
            document.getElementById('player1').innerHTML =              player1Life;
        }
        else {
        player2Life++;
            document.getElementById('player2').innerHTML =              player2Life;
        }
    };
    
    window.onload = function(){
        document.getElementById('player1').innerHTML = player1Life;
        document.getElementById('player2').innerHTML = player2Life;
    };

＆＃13;

.button{
  color:white;
  padding:10px 20px;
  background-color:red;
}

＆＃13;

<h1 class = "Head">Magic: The Gathering Life Counter App</h1>
    <p><a href="homepage.html" alt="Back To Home"><img src="logo.png"></a></p>
    <h2>Player 1</h2>
    <div>
        <a class = "button" onclick="sub(1);" id ="player1sub">-</a>
        <p id='player1'></p>
        <a class = "button" onclick="add(1);" id ="player1add">+</a>
    <h2>Player 2</h2>
    <div>
        <a class="button" onclick="sub(2);" id="player2sub">-</a>
        <p id='player2'></p>
        <a class="button" onclick="add(2);" id="player2add">+</a>
    </div>

＆＃13;

如何获得<a> tag to respond to onlick in javascript

3 个答案: