Javascript：如何通过单击按钮执行操作？

Question

What is the proper syntax for clicking a button and having Javascript run whatever statement you have? I did a google search but there is either multiple ways or people aren't explaining the parameters or functions very well.

Here is my code. All I want to do is when I click "attack" on my "button", the monster will lose 10 hp.

 document.getElementById("attack").click(); = dragon.hp = dragon.hp - 10;

Answer 1

When you do .click() you are calling a function. ; is how you end statements. You want to assign a function to the onclick property.

You want something like this:

document.getElementById("attack").onclick = function(){
    dragon.hp -= 10;
};

Better yet, you really want:

document.getElementById("attack").addEventListener('click', function(){
    dragon.hp -= 10;
});

PS dragon.hp -= 10; is shorthand for dragon.hp = dragon.hp - 10;

Answer 2

If you did something like this:

            <a ..... onClick="deductHpPoints()">...</a>

Then in your javascript:

            Function deductHpPoints()
            {
              //deduct logic
             }

Would that work for you? For something basic.

Answer 3

Here's what I would do:

<input type="button" value="Attack" onclick="attack()">

And then wherever your JavaScript lives:

function attack() {
    dragon.hp -= 10;
};

Actually, I would make the attack able to target different things:

function attack(target) {
    target.hp -= 10;
};

Maybe some radio buttons to select the target:

<input type="radio" name="monster" value="Dragon">
<input type="radio" name="monster" value="Beholder">
<input type="radio" name="monster" value="Minotaur">

Some code to find out which one was selected:

function discoverSelected(buttonName) {
    var theArray = document.getElementsByName(buttonName);
    for (var i = 0; i < theArray.length; i++) {
        if (theArray[i].checked) {
            return theArray[i].value;
        };
    };
};

Compare that name to the array of monsters:

function whichMonster(monName) {
    for (var i = 0; i < monsters.length; i++) {
        if (monsters[i].name == monName) {
            return monsters[i];
        };
    };
};

Then lastly, a button to attack with!

<input type="button" value="Attack" onclick="attack(whichMonster(discoverSelected("monster")))">

Answer 4

Just to extend the response to jQuery library, you can do this (after calling the jQuery library)

$("#attack").on('click', function(){
    dragon.hp -= 10;
});

or, in case the #attack button is created dynamically

$(document).on('click', "#attack", function(){
        dragon.hp -= 10;
    });