Working with the onclick method in Javascript

Question

I am new to Javascript and working on exercises. I am just trying to use the onclick and when the FIGHT button is clicked, then the fight function runs. For some reason the fight function is not running but I am able to get the button through 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 ********/





    })();

@Hardy No, that is totally wrong. fight is just fine where it is. A) it is hoisted to the top of the scope, and B) it's not evaluated until the onclick handler is invoked, some point in the future. — user229044
– user229044 ♦, Commented Dec 8, 2013 at 1:58

user229044 · Accepted Answer · 2013-12-08 02:02:36Z

1

button = document.getElementsByTagName('a'); Returns an array of elements. Note the function is called "get elements by tag name". To bind an event, you need to work with a single element, not an array of elements, even if that array happens to contain only one element.

Instead of this, which adds a property to the array...

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

You need to do this, which adds an onclick handler to the first (and only) a:

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

Note that, as soon as you add a second link, you're going to need something more specific then getElementsByTagName, as your buttons array will contain multiple elements. Consider adding unique IDs to the buttons you want to find, and using getElementById instead.

edited Dec 8, 2013 at 2:02

answered Dec 8, 2013 at 1:56

user229044♦

241k41 gold badges347 silver badges350 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

simpleWebGuy · Accepted Answer · 2014-02-19 03:56:42Z

0

I would add a unique identifier to the code opposed to the getElementsByTagName(a) which isn't unique

//this code should help you out

            var button = document.getElementById('unique identifier');

    button.onclick = function(e){

               yourFN();
                //dont forget your e.prevent, false info here


            };

answered Feb 19, 2014 at 3:56

simpleWebGuy

115 bronze badges

Collectives™ on Stack Overflow

Working with the onclick method in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related