0

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>
4

4 回答 4

0

您的代码有几个问题

  • 缺少Form关闭标签
  • 您的控件没有 ID
  • 结果输入中缺少引号
  • submit当您不提交表单时，不需要使用输入。尝试button
  • 不知道document.oil.result.write(aa);会做什么。我认为正确的过程是使用获取输入document.getElementById然后设置控件的值
于 2013-11-13T01:36:59.123 回答
0

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

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

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

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

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

( JSFiddle )

于 2013-11-13T02:11:40.793 回答
0

可能是这样的：

<!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>

！！！表格名不能用油

于 2013-11-13T02:09:46.690 回答
0

我将尝试以最少的换行次数来回答您的问题。这不是最佳答案。已添加注释以帮助您了解所需的更改。您的 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>
于 2013-11-13T01:38:12.067 回答