Question

向javasctipt迈进。我正在尝试编写一个简单的计算，如果换油时间超过6个月，将显示一些文字，汽车剩余的油量少于开始时的油量，如果一切正常则最终显示。

感谢您的帮助

的JavaScript

function oil(){
    var start = document.oil.start.value;
    var lastOilChange = document.oil.time.value;
    var totalOil = document.oil.amount.value;
    var aa = "you need to change the oil";

    if( lastOilChange > 6 || start < totalOil){
        document.oil.result.write(aa);
    }else{
        document.oil.result.write("Everything Is all good");
    }
}

HTML

<form name="oil">
    Starting amount of oil
    <input type="text" name="start">
    Time since oil change
    <input type="text" name="time">
    Total amount of oil in car now(quarts)
    <input type="text" name="amount">
    <input type="submit" onclick = oil()>
    <input name=result readonly>
</form>

Answer 1

您的代码存在一些问题

缺少Form关闭代码
您的控件没有ID
缺少结果输入的引号
当您未提交表单时，无需使用submit输入。试试button
不确定document.oil.result.write(aa);会做什么。我认为正确的过程是使用document.getElementById获取输入，然后设置控件的值

Answer 2

我会尽量用最少的换行数回答你的问题。这不是最佳答案。添加了评论以帮助您了解所需的更改。您的HTML 和 JavaScript无效，因此我对它们如何在Chrome上运行感到惊讶。

<!doctype>
<html>
<head>
<title>Personal</title>
<meta charset="utf-8">
<script type="text/javascript">

function _oil(){  // oil() conflicts with your form's name
    var start = document.oil.start.value;
    var lastOilChange = document.oil.time.value;
    var totalOil = document.oil.amount.value;
    var aa = "you need to change the oil";

    if( lastOilChange > 6 || start < totalOil){
        document.write(aa);  // you can't .write() to an element
    }else{
        document.write("Everything Is all good");
    }
    window.event.preventDefault();  // so your window does not load the same page when you submit
    return false;
}



</script>

<style>

form input {
display: block;
}


</style>
</head>
<body>

<form name="oil">
Starting amount of oil
<input type="text" name="start">
Time since oil change
<input type="text" name="time">
Total amount of oil in car now(quarts)
<input type="text" name="amount">
<input type="submit" onclick ="_oil()">  <!-- you must enclose the onclick attribute, even if both work -->

<input name=result readonly>

</body>
</html>

Answer 3

可能是这样的：

<!doctype>
<html>
<head>
<title>Personal</title>
<meta charset="utf-8">
<script type="text/javascript">
function oil(){
    var start = document.getElementsByName("start")[0].value;
    var lastOilChange = document.getElementsByName("time")[0].value;
    var totalOil = document.getElementsByName("amount")[0].value;
    var aa = "you need to change the oil";

    if( lastOilChange > 6 || start < totalOil){
        document.getElementsByName("result")[0].value = aa;
    }else{
        document.getElementsByName("result")[0].value = "Everything Is all good";
    }

}
</script>

<style>
form input {
    display: block;
}
</style>
</head>
<body>

<form name="thisform">
    Starting amount of oil
    <input type="text" name="start">
    Time since oil change
    <input type="text" name="time">
    Total amount of oil in car now(quarts)
    <input type="text" name="amount">
    <input type="button" value="go" onclick = oil()>
    <input name=result readonly>
</form>
</body>
</html>

!!!表格名称不能用油

Answer 4

您想要的是设置表单字段的值而不是尝试使用write：

if( lastOilChange > 6 || start < totalOil){
    document.oil.result.value = aa;
} else {
    document.oil.result.value = "Everything Is all good";
}

正如其他答案中所指出的，您还需要阻止表单尝试向服务器提交信息并重新加载页面。有几种方法可以做到这一点（参见例如JavaScript code to stop form submission）。一种是用普通按钮（<input type="button" value="Calculate" />）替换提交按钮。

另一种方法是将您的函数作为事件处理程序附加到表单，并在其末尾添加return false。

document.oil.onsubmit = function () {
    ...
    return false;
}

（JSFiddle）

有javascript的麻烦

4 个答案: