Thread replies: 17
Thread images: 2
Thread images: 2
T.O.A.N.
I'm New To JavaScript (Pt. II) 2017-04-18 10:57:04 Post No. 299787
[Report] Image search: [Google]
I'm New To JavaScript (Pt. II) 2017-04-18 10:57:04 Post No. 299787
[Report] Image search: [Google]
File: 28668e83f7798195859cb8a896c34222.jpg (12KB, 300x300px) Image search:
[Google]
12KB, 300x300px
I am trying to make my code work, but it won't work! I want error messages to come up beside each input field depending on whether the input is a proper number, and I want the "clear" button to clear everything, not just the input fields. What needs to change?
<script>
var $ = function (id) {
return document.getElementById(id);
}
var mpgCalc = function() {
var milesDriven = document.getElementById("miles_driven").value;
var gallonsUsed = document.getElementById("gallons_used").value;
var priceGallon = document.getElementById("price_gallon").value;
var milesOverGallons;
var gasMileage;
var gallonsByDollars;
var tripCost;
var milesDrivenError;
var gallonsUsedError;
var priceGallonError;
switch(true) {
case (isNaN(milesDriven) || (milesDriven < 0)):
milesDrivenError = "You must input a proper number.";
gasMileage = "";
tripCost = "";
case (isNaN(gallonsUsed) || (gallonsUsed < 0)):
gallonsUsedError = "You must input a proper number.";
gasMileage = "";
tripCost = "";
case (isNaN(priceGallon) || (priceGallon < 0)):
priceGallonError = "You must input a proper number.";
gasMileage = "";
tripCost = "";
break;
case ((gallonsUsed >=0) && (priceGallon >= 0)):
gallonsByDollars = (gallonsUsed * priceGallon);
tripCost = "The cost of your trip is $" + parseFloat(gallonsByDollars.toFixed(2)) + ".";
case ((milesDriven >=0) && (gallonsUsed >= 0)):
milesOverGallons = (milesDriven / gallonsUsed);
break;
}
(continued...)
>>
File: 3840x2400-candy_food_gummy_bear-2509.jpg (766KB, 3840x2400px) Image search:
[Google]
766KB, 3840x2400px
>>299787
Hopefully 4chan does not think it's SPAM on the fourth try....
>document.getElementById("mpg").innerHTML = gasMileage;
>document.getElementById("cost").innerHTML = tripCost;
>document.getElementById("miles_driven_error").innerHMTL = milesDrivenError;
>document.getElementById("gallons_used_error").innerHMTL = gallonsUsedError;
>document.getElementById("price_gallon_error").innerHMTL = priceGallonError;
}
>>
>>299787
Isn't there a special way to format code on 4chan?
It keeps registering my thing as spam when I'm just in a bind with this programming assignment I've got...
</head>
<body>
<h1>Calculate Your MPG</h1>
<h2>Enter the information below to see if you are getting good mileage!</h2>
<form id="mpgform">
<label for="miles_driven">Miles Driven: </label>
<input type="text" id="miles_driven" name="miles_driven">
<span class="error" id="miles_driven_error"></span>
<label for="gallons_used">Gallons of Gas Used: </label>
<input type="text" id="gallons_used" name="gallons_used">
<span class="error" id="gallons_used_error"></span>
<label for="price_gallon">Price per gallon: </label>
<input type="text" id="price_gallon" name="price_gallon">
<span class="error" id="price_gallon_error"></span>
<input type="button" id="btnCalc" value="Calculate the MPG" class="clear">
<input type="button" id="btnClear" value="Clear Form">
<p id="mpg"></p>
<p id="cost"></p>
</form>
</body>
</html>
>>
Put it on pastebin or similar and then link it, that might make it easier to display it.
>>
>>299805
That's a great suggestion, here is my thing!
https://pastebin.com/qRee8G8U
>>
>>299823
The 'true' is there so that the switch can use boolean operators, or can I have both?
>>
>>299787
from what I can see so far, you need to replace the ".value" in lines 113 through 121 with ".innerHTML".
This doesn't fix everything though so I'll keep looking.
>>
>>299819
Line 97, try replace gasMileage with milesOverGallons.
>>
>>299829
well what he needs to do is replace all instances of "gasMileage" with "milesOverGallons" or vise versa since they are the same thing.
>>
>>
>>299831
I just made a mistake on that spot, sorry about that, please see: https://pastebin.com/Ge0S6pxh
>>
>>299836
I fixed the error messages not showing up by putting the "document.getElementById("whatever").innerHTML = variable" inside of the case statements. not sure why this made any difference but it did. I noticed however that when you input a NaN in any field all of the fields after it show an error too even when they shouldn't. After further testing this seems to be a bug with the switch statement itself, so you are probably better off just using if statements here instead.
>>
>>299836
Holy shit, finally found it...
Lines 100, 101 an 102 is mistyped... HMTL instead of HTML.
>>
>>
>>299787
So things are looking good so far, and really now all I'm wondering about is my switch statement.
I understand things like conditionals and booleans, but I am not so familiar with switches.
I am under the impression I need this because I need multiple conditions to be evaluated and yield outputs independently of each other, and I'm not certain how to do that with an if-else that wouldn't be gigantic.
But this switch statement seems to ignore the first three cases, where I am saying EITHER this input is not a number OR it's a number but less than zero.
In which case it should output an error message.
It's not doing that though.
Thread posts: 17
Thread images: 2
Thread images: 2