爲什麼我的原型不能執行？

我想Success! & Oops!旗幟，以瀏覽器的頂部出現每當goingOutChecker()原型正常工作&我叫goingOutChecker()原型裏面GeneralChecker()功能。然而，無論何時我將goingOutChecker()原型&函數調用註釋掉，monthlyBillCheckerAndSalaryChecker()原型以及其調用完美地工作。換句話說，當用戶點擊Submit時，Success! & Oops!橫幅的顯示方式應該與前兩個字段被正確或不正確地填寫一樣。爲什麼我的原型不能執行？

我的問題是，爲什麼不會goingOutChecker()原型正常工作，每當我打電話給goingOutChecker()原型裏面GeneralChecker()函數？換句話說，只要所有3個字段都填寫正確或不正確，爲什麼不出現這些橫幅？

此外，我沒有在控制檯中發現錯誤，只是作爲一個附註。

這裏的gameTime.html文件

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>WOMP</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="gameTime.css"> 
</head>  
<body> 
    <div class="container"> 
     <div id="success"></div> 
     <div id="danger"></div> 
     <div id="success2"></div> 
     <div id="danger2"></div> 
    </div> 
    <form class="col-md-4 col-md-offset-4" name="formHandler" id="handle"> 
     <div id="allFields"> 
      <div class="moveUsername"> 
       <h1>(All numbers inputted will be assumed that it's in dollars)</h1> 
       <label for="usr">What's your annual salary?</label> 
       <input type="field" class="form-control" id="salary" placeholder="What's your annual salary?" required="required"> 
      </div> 

      <div class="ageMovement"> 
       <label for="usr">How much do you spend every month on bills?</label> 
       <input type="field" class="form-control" id="monthlyBills" name="ageChecker" placeholder="How much do you spend every month on bills?" required="required"> 
      </div> 

      <div class="emailMovement"> 
       <label for="usr">How much do you spend when going out?</label> 
       <input type="field" class="form-control" id="goingOut" name="emailChecker" placeholder="How much do you spend when going out?" required="required"> 
      </div> 
      <button type="submit" id="btnSubmit" class="btn btn-default" onsubmit="GeneralChecker()">Submit</button> 
     </form> 
     <script type="text/javascript" src="gameTime.js"></script> 
    </body> 
    </html>

這裏的gameTime.js文件

function GeneralChecker(salary, fixedExpense, variableExpense) { 
     var self = this; 
     self.salary = salary; 
     self.fixedExpense = fixedExpense; 
     self.variableExpense = variableExpense; 
     self.isSalaryZeroOrLess = function() { 
      var s = parseInt(document.getElementById("salary").value); 
      console.log(this); 
      if(s <= 0) { 
       console.log("Looks like you have no income!"); 
      } else { 
       console.log("Your annual salary is: ", s); 
      } 
      self.monthlyBillCheckerAndSalaryChecker(); 
      self.goingOutChecker(); 
     } 
    } 

    GeneralChecker.prototype.monthlyBillCheckerAndSalaryChecker = function() { 
     var m = parseInt(document.getElementById("monthlyBills").value); 
     var firstDiv = document.getElementsByTagName("div"); 
     var secondDiv = document.getElementsByTagName("div"); 
     var node = document.getElementById("danger"); 
     var node2 = document.getElementById("success"); 

     if(m <= 0 || isNaN(m)) { 
      console.log("Looks like you have no monthly payments to make!"); 
      secondDiv[2].innerHTML = "<strong>Oops!</strong> Looks like you have an invalid input."; 
      node.className += " alert alert-danger"; 
     } else {    
      firstDiv[1].innerHTML = "<strong>Success!</strong> Check for advice below.";  
      node2.className += " alert alert-success"; 
     } 

     var s = parseInt(document.getElementById("salary").value); 
     var userMonthlySalary = s/12; 
     console.log(userMonthlySalary); 

     if(userMonthlySalary) { 
      console.log("That means you make " + userMonthlySalary + " a month."); 
     } 
    } 

    GeneralChecker.prototype.goingOutChecker = function() { 
     var m = parseInt(document.getElementById("goingOut").value); 
     var firstDiv = document.getElementsByTagName("div"); 
     var secondDiv = document.getElementsByTagName("div"); 
     var node = document.getElementById("danger2"); 
     var node2 = document.getElementById("success2"); 

     if(m <= 0 || isNaN(m)) { 
      console.log("You don't go out much"); 
      secondDiv[4].innerHTML = "<strong>Oops!</strong> Looks like you have an invalid input."; 
      node.className += " alert alert-danger"; 
     } else {    
      firstDiv[3].innerHTML = "<strong>Success!</strong> Check for advice below.";  
      node2.className += " alert alert-success"; 
     }  
    } 

    var fin = new GeneralChecker(1000, 1000, 1000); 
    document.querySelector("#btnSubmit").addEventListener("click", fin.isSalaryZeroOrLess);

來源

2016-12-30 chompy

你失去對象上下文當您綁定的事件處理程序。你可以做到這一點無論是這樣的：

document.querySelector("#btnSubmit").addEventListener("click", function() { 
    fin.isSalaryZeroOrLess(); 
});

或像這樣：

document.querySelector("#btnSubmit").addEventListener("click", fin.isSalaryZeroOrLess.bind(fin));

的this的價值並不取決於函數是如何相對於一些對象創建的，而是關於如何功能是援引。通過在原始代碼中傳遞函數的引用，與該對象的關係就會丟失。

來源

2016-12-30 15:34:53 Pointy

嗨波蒂。我試過你的建議，但它不起作用:( – chompy

@chompy這是因爲我輸入了一個bug :)堅持，我會解決它。在第一個示例中，代碼需要使用'（）'來實際調用該函數。 – Pointy

哦，好的。感謝您的答案順便說一句，這使得很多道理:-) – chompy

爲什麼我的原型不能執行？

回答

相關問題