我正确地做这个原型吗?

时间:2016-12-26 01:50:38

标签: javascript html css oop prototype

如何弹出这两个警报调用?我觉得我做得对,但出于某种原因,我的浏览器没有任何反应。我猜我不应该onclick="isSalaryZeroOrLess();greaterThan()"在同一条线上,但我不太确定。我只是想使用原型,所以我可以练习。我不想使用无聊的旧功能。

感谢您花时间阅读。

以下是文件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="isSalaryZeroOrLess();greaterThan()">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 ReferenceError: isSalaryZeroOrLess is not defined
    at HTMLButtonElement.onclick (gameTime.html:28)
gameTime.html:28 Uncaught ReferenceError: isSalaryZeroOrLess is not defined
    at HTMLButtonElement.onclick (gameTime.html:28)
gameTime.html:28 Uncaught ReferenceError: isSalaryZeroOrLess is not defined
    at HTMLButtonElement.onclick (gameTime.html:28)
gameTime.html:28 Uncaught ReferenceError: isSalaryZeroOrLess is not defined
    at HTMLButtonElement.onclick (gameTime.html:28)

2 个答案:

答案 0 :(得分:0)

您没有在任何地方使用您的财务方法。 首先,在某处初始化您的Finance对象。

var finance = new Finance(your_inputs);

更改按钮的onclick

<button type="submit" class="btn btn-default" onclick="finance.isSalaryZeroOrLess();finance.greaterThan()">Submit</button>

答案 1 :(得分:0)

从您的代码中看起来您还没有创建财务对象。 你可以这样做,然后它就可以了。

  var fin = new Finance(1000,1000,1000);

定义了greaterThan函数后。然后在onclick中你就可以做到这一点。

    <button type="submit" class="btn btn-default" onclick="fin.isSalaryZeroOrLess();fin.greaterThan()">Submit</button>