使用Javascript中的onclick方法

Working with the onclick method in Javascript

本文关键字：方法 onclick 中的 Javascript 使用更新时间：2024-05-19

我是Javascript的新手，正在练习。我只是想使用onclick，当点击"战斗"按钮时，战斗功能就会运行。由于某种原因，fight函数没有运行，但我可以通过DOM获得按钮。

HTML

    <!doctype html>  
    <html>
    <head>
        <title>Goal4: Assignment - Duel III</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <script src="js/main.js"></script>
    <body>
    <div id="scores">
        <div id="kabal">
            <p></p>
        </div>
        <div id="kratos">
            <p></p>
        </div>
        <div class="clear"></div>
    </div>
    <div id="fight_box">
        <div id="fight_btn">
            <h4 id="round">Click To Start Fight</h4>
            <a href="#" class="buttonblue">FIGHT!</a>
        </div>
        <div id="fight_bg">
            <img src="images/fight_bg.png">
        </div>
    </div>
    <script src="js/main.js"></script>
    </body>
    </html>

Javascript

    /* 
    Name: Walker Kinne
    Date: 12/1/13
    Assignment: Goal1: Assignment: Duel1
    */
    (function(){

        console.log('program starts');
        var button = document.getElementsByTagName('a');
        console.log(button);
        button.onclick = function(e){

            fight();
            e.preventDefault();
            return false;
        };

    function fight(){
        console.log("in the fight function");
            var fighter1 = {name:'Spiderman', damage:20, health: 100};
            var fighter2 = {name:'Batman', damage:20, health: 100};

           var minDamage1 = fighter1.damage * .5;
           var minDamage2 = fighter2.damage * .5;
           var f1 = Math.floor(Math.random()*(fighter1.damage - minDamage1)+minDamage1);
           var f2 = Math.floor(Math.random()*(fighter2.damage - minDamage2)+minDamage2);
           console.log(fighter1.name);

          // console.log(f1);
           //console.log(f2);

           fighter1.health -=f2;
           fighter2.health -=f1;
           console.log("player1:" + fighter1.health);
           console.log("player2:" + fighter2.health);
            var a = fighter1.health;
    };
           //console.log(playerOneName+":"+playerOneHealth+playerTwoName+":"+playerTwoHealth);
            //var results = winnerCheck();
           //console.log(results);

           /*if(results === "no winner"){
               document.getElementById("kabal").
               //alert(fighter1[0]+":"+fighter1[2]+" ROUND"+round+" OVER"+fighter2[0]+":"+fighter2[2]);
            }else{
               alert(results);
               break;
           }
    */

        /* End of fight function */

    /*
    function winnerCheck(){
        console.log("winner check");
        var result = "no winner";
        if(fighter1[2]<1 && fighter2[2]<1){
            result = "You Both Die";
        }else if(fighter1[2]<1){
            result= fighter2[0] + " wins!!";
        }else if(fighter2[2]<1){
            result = fighter1[0] + " wins!!";
        };
        return result;
    };

    '/******** Program Starts ********/


    })();

button = document.getElementsByTagName('a');返回元素的数组。请注意，该函数被称为"通过标记名称获取元素"。要绑定事件，需要使用单个元素，而不是元素数组，即使该数组恰好只包含一个元素。

而不是这样，它向数组中添加了一个属性。。。

 button = document.getElementsByTagName('a');
 button.onclick = function(e){

您需要这样做，它将onclick处理程序添加到第一个（也是唯一一个）a:

 buttons = document.getElementsByTagName('a');
 buttons[0].onclick = function(e){

请注意，一旦添加了第二个链接，就需要比getElementsByTagName更具体的内容，因为buttons数组将包含多个元素。请考虑为要查找的按钮添加唯一ID，然后使用getElementById。

我会在代码中添加一个唯一的标识符，而不是唯一的的getElementsByTagName（a）

//这个代码应该可以帮助你完成

            var button = document.getElementById('unique identifier');
    button.onclick = function(e){
               yourFN();
                //dont forget your e.prevent, false info here

            };