Question

当用户在点击alert alert-success按钮时成功输入所需字段时，我试图让引导类Submit出现在页面顶部。我做了很多尝试来解决这个问题，但我觉得我GeneralChecker()函数中的当前代码非常接近（或不是）。以下是alert alert-success我正在谈论的内容（不包括Success!之后的文字，我可以稍后自己做）。我还应该提一下，我在控制台中没有收到任何错误。

这里是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> 


    <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">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.monthlyBillChecker();
        self.monthlySalaryChecker();
    }
    self.successChecker = function() {
        if(self.monthlyBillChecker() && self.monthlySalaryChecker()) {
            var s = document.getElementById("success");
            s.className += " alert alert-success";
            document.body.appendChidl(s);
            document.write(s);
        }
    }
}

GeneralChecker.prototype.monthlySalaryChecker = function() {
    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.");
    }
}

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

GeneralChecker.prototype.monthlyBillChecker = function() {
    var m = parseInt(document.getElementById("monthlyBills").value);

    if(m <= 0) {
        console.log("Looks like you have no monthly payments to make!");
    }
    if(isNaN(m)) {
        console.log("This isn't a number!");
    }
}

Answer 1

所以在这里我更新了答案：

添加form - 标记属性onSubmit="checkData()"。之后，在JS-File中创建一个新函数：

function checkData() {
    *here your whole code*
}

在此功能中，您现在可以执行所需的所有操作。您可以使用document.getElementById("fieldId").value获取输入的值。如果你想像以前一样检查monthSalary spearated，只需添加一个像这样的新函数，并在checkData函数中调用它。

我希望这有帮助，告诉我你是否理解不了解。

Answer 2

您正在使用<button onClick="GeneralChecker(..)">标记而没有javascript回调。尝试添加{{1}}

Answer 3

你的意思是type =＆＃39; text＆＃39;？

无论如何，我认为你会做更好的服务......

    var fin = new GeneralChecker(1000, 1000, 1000);
    $(function($){

        $("input[type='text']").on("change", function() {
            fin.isSalaryZeroOrLess();
            fin.successChecker();
        });
    });

这样，每次更改后都会检查必填字段，一旦表单准备好就会告诉用户，而不是等待单击按钮。

为什么我的JS创建的类出现在浏览器上？

3 个答案: