having trouble with javascript

Question

Beginer to javasctipt. I am trying to write a simple calculation that will display some text if the time since oil change is past 6 months, the amount of oil left in the car is less then it started and finally display if everything is ok.

Thanks for the help

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>

score 0 · Answer 1 · answered Nov 13 '13 at 01:36

There are a couple of problems with your code

Missing Form close tag
Your controls don't have IDs
missing quotes on the result input
Don't need to use a submit input when you're not submitting to a form. Try button
Not sure what document.oil.result.write(aa); will do. I think the correct process is to get the input using document.getElementById and then set the value of the control

score 0 · Answer 2 · answered Nov 13 '13 at 01:38

I will try to answer your question with the least number of line changes. This is not the optimal answer. Comments have been added to help you understand required changes. Your HTML and JavaScript are invalid, so it was a surprise to me how they both ran on 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>

score 0 · Answer 3 · answered Nov 13 '13 at 02:09

May be like this:

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

！！！ The form name can not use oil

score 0 · Answer 4 · edited May 23 '17 at 11:56

What you want is to set the value of the form field rather than trying to use write:

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

As pointed out in other answers, though, you also need to prevent the form from trying to submit information to the server and reload the page. There are several ways of doing this (see e.g. JavaScript code to stop form submission). One is to replace the submit button with an ordinary button (<input type="button" value="Calculate" />).

Another is to attach your function to the form as an event handler, and return false at the end of it.

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

(JSFiddle)

having trouble with javascript

4 Answers4