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

Question

单击按钮并让 Javascript 运行您拥有的任何语句的正确语法是什么？我做了一个谷歌搜索，但要么有多种方法，要么人​​们没有很好地解释参数或功能。

这是我的代码。我想要做的就是当我点击我的“按钮”上的“攻击”时，怪物会损失 10 hp。

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

Answer 1

当你这样做时，.click()你正在调用一个函数。;是你如何结束陈述。您想为该属性分配一个功能。onclick

你想要这样的东西：

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

更好的是，你真的想要：

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

PSdragon.hp -= 10;是简写dragon.hp = dragon.hp - 10;

Answer 2

如果你做了这样的事情：

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

然后在你的javascript中：

            Function deductHpPoints()
            {
              //deduct logic
             }

这对你有用吗？对于一些基本的东西。

Answer 3

这是我要做的：

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

然后无论您的 JavaScript 位于何处：

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

实际上，我会让攻击能够针对不同的事物：

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

也许一些单选按钮来选择目标：

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

一些代码来找出哪个被选中：

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

将该名称与怪物数组进行比较：

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

然后最后，一个按钮来攻击！

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

Answer 4

只是为了扩展对jQuery库的响应，您可以这样做（在调用jQuery库之后）

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

或者，如果#attack按钮是动态创建 的

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