使用Javascript中的onclick方法

我是JavaScript新手，正在進行練習。我只是試圖使用onclick，當單擊FIGHT按鈕時，然後打開功能。出於某種原因，打鬥功能沒有運行，但我可以通過DOM獲取按鈕。使用Javascript中的onclick方法

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 ********/ 





    })();

來源

2013-12-08 user3072159

@Hardy不，那是完全錯誤。「戰鬥」就好了。 A）將它懸掛在作用域的頂部，B）直到'onclick'處理程序被調用時纔會評估它，這是將來的一些要點。 – meagar

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。

來源

2013-12-08 01:56:50 meagar

我唯一的標識符加入到反對的getElementsByTagName的代碼（A），這是不是唯一的

//這個代碼應該幫助你

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

    button.onclick = function(e){ 

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


      };

來源

2014-02-19 03:56:42 simpleWebGuy

使用Javascript中的onclick方法

回答

相關問題