为什么我的原型不起作用？

我的alert("No money")工作正常，但是我的alert("works!")如何无法工作？这些错误对我来说也没有意义，因为我觉得我写的东西在句法上是正确的。

感谢您抽出宝贵的时间阅读：D

这是我的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>
    <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> 
        </div>
        <button type="submit" class="btn btn-default" onclick="fin.isSalaryZeroOrLess()">Submit</button>
    </form>
    <script type="text/javascript" src="gameTime.js"></script>
</body>
</html>

这是我的gameTime.js

  function Finance(salary, fixedExpense, variableExpense) {
    this.salary = salary;
    this.fixedExpense = fixedExpense;
    this.variableExpense = variableExpense;
    this.isSalaryZeroOrLess = function() {
        var s = parseInt(document.getElementById("salary").value);
        if(s <= 0) {
            alert("No money");
        }
    }
}

 Finance.prototype.greaterThan = function() {
    var s = parseInt(document.getElementById("salary").value);
    var userSalary = s / 12;
    if(userSalary < 30000) {
        alert("works!");
    }
 }
    var fin = new Finance(1000,1000,1000);

这是错误：

    Uncaught TypeError: Cannot set property 'greaterThan' of undefined
    at gameTime.js:14
gameTime.html:28 Uncaught TypeError: Cannot read property 'isSalaryZeroOrLess' of undefined
    at HTMLButtonElement.onclick (gameTime.html:28)

如所注释的，您会遇到错误：

gameTime.html：28 Unduck typeError：无法阅读不确定的属性'Issalaryzeroororor' 在htmlbuttonelement.onclick（gameTime.html：28）

因为，您正在尝试在HTML中绑定事件

    <button type="submit" class="btn btn-default" onclick="fin.isSalaryZeroOrLess()">Submit</button>
</form>
<script type="text/javascript" src="gameTime.js"></script>

，但是如您所见，您的gameTime.js尚未加载。因此，fin尚未定义。

快速解决方案：

将您的脚本标签移至头。

强大的解决方案

将事件侦听器移至JS文件并使用.addEventListener并将您的代码包装在功能（ iife ）中，以免污染全局范围。

我已经更新了您的代码，它的工作正常： JSFIDDLE

您永远不会调用更大的功能。您只将其定义并附加到财务原型，我看不到您曾经做过任何事情。

相关内容

最新更新

热门标签：