Javascript：如何通過單擊按鈕執行操作？

Question

單擊按鈕並使Javascript運行您所擁有的任何語句的正確語法是什么？ 我做了一個google搜索，但是有多種方法，或者人們沒有很好地解釋參數或功能。

這是我的代碼。 我要做的就是當我在“按鈕”上單擊“攻擊”時，怪物會損失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;
});

PS dragon.hp -= 10; 是dragon.hp = dragon.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;
    });