javascript按鈕onclick不會觸發

所以我做了這個簡單的任務，但我不明白爲什麼這不起作用？同一個人可以看到並告訴我嗎？我發現問題在於該按鈕沒有調用該功能，但爲什麼？javascript按鈕onclick不會觸發

<html> 
<head> 
    <title>Task count</title> 
    <script> 
     var over21 = 6.19; 
     var under21 = 5.19; 

     // Getting data from a user connecting variables with textboxes by ID 
     var age = document.getElementById('age'); 
     var hours = document.getElementById('hours'); 

     // function wich does all of the calculation 
     function magic(){  
      //cheking if he is under or over 21 
      if(age < 21){ 
       alert("You will make " + (age*under21)); 
      }else{ 
       alert("You will make " + (age*over21));        
      }; 
     }; 

     // function that does everything and is connected to the button 
     function myFunction(){ 
      // Validation checking that entered number is not more than 150 
      // And also if age is correct 
      if((hours < 150 && hours > 0) && (age < 150 && age > 12)){ 
       magic(); 
      }else{ 
       alert("Wrong!"); 
      }; 
     }; 
    </script> 
</head> 
<body> 
    <label>Enter your age.(12-150)</label> 
    <input type="text" class="textBox" id="age"><br> 
    <label>Enter how long will you work.(1-150)</label> 
    <input type="text" class="textBox" id="hours"><br> 
    <button onclick="myFunction()" >How much will i make ?</button> 
</body> 
</html>

來源

2012-10-22 user1134746

給按鈕一個類型？ '' – jdstankosky

請提供javascript功能的完整上下文。我們需要了解JavaScript處理時的文檔狀態。即......是否加載了DOM？ –

我建議不要使用如此多的全局變量。

移動：

var age = document.getElementById('age'); 
var hours = document.getElementById('hours');

到myFunction()。

然後您就需要將這些二：

var age = parseInt(document.getElementById('age').value); 
var hours = parseInt(document.getElementById('hours').value);

我們使用parseInt取值作爲一個字符串，並把它變成一個整數值。

由於age和hours在myFunction現在被定義，你需要通過age到magic()

var over21 = 6.19; 
    var under21 = 5.19; 

    // function wich does all of the calculation 
    function magic(age){ 

     //cheking if he is under or over 21 
     if(age < 21){ 
      alert("You will make " + (age*under21)); 
     }else{ 
      alert("You will make " + (age*over21));        
     }; 
    }; 
    // function that does everything and is connected to the button 
    function myFunction(){ 

    var age = parseInt(document.getElementById('age').value); 
    var hours = parseInt(document.getElementById('hours').value); 
    // Validation checking that entered number is not more than 150 // And also if age is correct 
    console.log(age + " : " + hours) 
     if((hours < 150 && hours > 0) && (age < 150 && age > 12)){ 
      magic(age); 
     }else{ 
      alert("Wrong!"); 
     }; 
    };

此外，如果你想（1-150），你需要修改這個if聲明：

if((hours < 150 && hours > 0) && (age < 150 && age > 12)){ ... }

到：

if((hours <= 150 && hours > 0) && (age <= 150 && age > 12)){ ... }

最後，我認爲數學可能在magic()功能不正確：

function magic(age, hours){ 

    //cheking if he is under or over 21 
    if(age < 21){ 
     alert("You will make " + (hours*under21)); 
    }else{ 
     alert("You will make " + (hours*over21));        
    }; 
};

我相信你想hours*under21和hours*over21。請注意，hours現在也作爲參數傳入。

EXAMPLE

來源

2012-10-22 19:55:50 Chase

thx很多！現在我看到我有多少愚蠢的東西））） – user1134746

只是幾個錯誤，沒有後顧之憂。發生在我們身上:) – Chase

var age = document.getElementById('age').value; 
var hours = document.getElementById('hours').value;

你都拿到HTML元素的對象不是「價值」，他們遏制。

來源

2012-10-22 19:46:52

在頁面加載時，這也只發生一次，所以這些值總是空白，並且乘法的結果是NaN。 –

getElementById調用正在嘗試獲取元素之前運行。

您可以將它們移動到函數內部，也可以在<body>的末尾移動到另一個<script>。

然後，要訪問該值本身，請使用age.value和hours.value。您還應該通過parseInt(...,10)運行它們以確保它們是數字。

來源

2012-10-22 19:47:37

如果是這樣的代碼，我可以當場3個錯誤：它的加載只有一次，嘗試當你需要他們來分配瓦爾之前你訪問DOM

。
你分配瓦爾的DOM對象，而不是他們的價值觀，用的getElementById（「mycoolid」）。值
你沒有指定類型的按鈕元素，不同的瀏覽器分配不同的默認迪這個屬性。

來源

2012-10-22 19:58:46

您的代碼設置您的年齡和小時變量只能運行一次，因此它們是這些文本框的空白/默認值。您應該將它們聲明在函數的範圍之外，但是在「myFunction」函數中重新設置它們。或者，您只能在「myFunction」函數中聲明/設置它們，然後將它們作爲參數傳遞給「magic」函數。最後，你的腳本應該是這個樣子，但：

<html> 
<head> 
    <title>Task count</title> 
    <script> 
     var over21 = 6.19; 
     var under21 = 5.19; 

     // function wich does all of the calculation 
     function magic(age, hours){  
      //cheking if he is under or over 21 
      if(age < 21){ 
       alert("You will make " + (age*under21)); 
      }else{ 
       alert("You will make " + (age*over21));        
      }; 
     }; 

     // function that does everything and is connected to the button 
     function myFunction(){ 
      // Getting data from a user connecting variables with textboxes by ID 
      var age = document.getElementById('age').value; 
      var hours = document.getElementById('hours').value; 

      // Validation checking that entered number is not more than 150 
      // And also if age is correct 
      if((hours < 150 && hours > 0) && (age < 150 && age > 12)){ 
       magic(age, hours); 
      }else{ 
       alert("Wrong!"); 
      }; 
     }; 
    </script> 
</head> 
<body> 
    <label>Enter your age.(12-150)</label> 
    <input type="text" class="textBox" id="age"><br> 
    <label>Enter how long will you work.(1-150)</label> 
    <input type="text" class="textBox" id="hours"><br> 
    <button onclick="myFunction()" >How much will i make ?</button> 
</body> 
</html>

作爲附加的註釋，你被under21或over21乘以年齡。我敢肯定，你希望將小時數乘以21或21以上。

來源

2012-10-22 20:02:12

javascript按鈕onclick不會觸發

回答

相關問題