So I’m trying to create a simple table that would do the following:
Ask the user for their gallons used, as well as miles driven, then divide miles driven by gallons used to show their miles per gallon. I’m just not quite sure how to get the answers from the prompt into my table, I’ve tried using document.writeIn to create everything but couldn’t figure out how to get that to work (if that’s something that could work). I don’t expect anyone to do the code for me, just need a nudge in the right direction!
You’ll need to use the browser’s HTML DOM methods to update the content of the element you want to put the mpg value in. Here’s something I found in a quick google search that seems to be a good introduction:
It will probably be helpful if you give the element you are going to update an id so that you can refer to it directly using document.getElementByID().
I finally got it to work! I still don’t understand everything, but I figured the basics of assigning an id and using the .js to re-assign with .innerHTML.
I’d use .textContent instead of .innerHTML, because you’re reading a user input (and you never know what a user writes into an input field):
gallons.textContent = gallon
To give you an idea what could happen if you use innerHTML, enter this into your input field (copy/paste the whole line) and see what happens: <script>alert('BOO')</script>
So I have a simple miles per gallon table I’m trying to loop through via prompts. The goal is to have the code ask for miles, gallons, output into a table, and repeat until the user types a value below zero. So they can have as many rows/tries at calculating as they want ,until they put a negative value then they can look at it. I know this may not be the best practical use of a website, but I’m just trying to use this an an exercise to modularly figure out things.
I can’t quite get it to loop though, what am I doing wrong? Wrong type of loop? Wrong idea?
Here’s the JavaScript:
do {
let milesDriven = prompt("Enter miles driven:", "0");
let gallon = prompt("Enter gallons used:", "0");
parseInt(milesDriven);
parseInt(gallon);
let mpg = milesDriven / gallon;
var table = document.getElementById("table-body");
var row = table.insertRow(0);
var cellOne = row.insertCell(0);
var cellTwo = row.insertCell(1);
var cellThree = row.insertCell(2);
cellOne.innerHTML = gallon;
cellTwo.innerHTML = milesDriven;
cellThree.innerHTML = mpg;
}
while(milesDriven > 0);
declare using var ,
Currently, we can’t access it outside the body of loop;
Do you mean just initialize the variables outside of the loop, or change the let to a var?
EDIT: Ah, I see what you mean, I’m not sure why it didn’t work but using all var vs having both let and var in the loop. Curious as to why but it works now!
You shouldn’t declare the variables in the loop;
Just declare it before the loop, and then use them inside the loop…
As far as this example is considered,
variables declared with let have block scope, they can’t be used outside the block on which they’re defined. and therefore you were receiving error: milesDriven is not defined in this scope.
So with the help of the forum I’ve figured out how to loop a mileage calculator table with prompts, the issue I’m having is that it works, but maybe it’s not the optimal way of doing it, as currently I can have a break in my while loop, but am unsure what the condition should be.
while () {
var milesDriven = prompt("Enter miles driven:", "0");
if (milesDriven < 0) {
break;
}
var gallon = prompt("Enter gallons used:", "0");
parseInt(milesDriven);
parseInt(gallon);
var mpg = milesDriven / gallon;
var table = document.getElementById("table-body");
var row = table.insertRow(0);
var cellOne = row.insertCell(0);
var cellTwo = row.insertCell(1);
var cellThree = row.insertCell(2);
cellOne.innerHTML = gallon;
cellTwo.innerHTML = milesDriven;
cellThree.innerHTML = mpg;
}
Essentially I just want the prompts to loop forever until the user types a value below or equal to 0. I thought maybe making the condition if it’s an integer it wont run again, but essentially I’m asking is there a way to use a while loop, but if one of the conditions is false have it not run at all? If so, what’s the use of the conditions if they’re doing the same thing as the break;
As a side question, is there a way to have the table load in real-time versus a blank page, which only loads after the prompts are done? At least through the prompt method.
A while loop continues to loop while the condition in the parens is true. I’m guessing you can think of something to put in there that will always be true. ← hint
Though, I always recommend a way for the user to stop a loop for user input that does not involve crashing the program. Like a boolean doAgain variable.
Ah, so it will run the loop at least once before checking on the condition? So how about this, prompting the user first, then using an if statement to see if the values are greater than 0, and then running the loop after that.
var milesDriven = prompt("Enter miles driven:", "0");
var gallon = prompt("Enter gallons used:", "0");
parseInt(milesDriven);
parseInt(gallon);
var mpg = milesDriven / gallon;
if (milesDriven > 0 || gallon > 0) {
var table = document.getElementById("table-body");
var row = table.insertRow(0);
var cellOne = row.insertCell(0);
var cellTwo = row.insertCell(1);
var cellThree = row.insertCell(2);
cellOne.innerHTML = gallon;
cellTwo.innerHTML = milesDriven;
cellThree.innerHTML = mpg;
} else {
break;
}
while (milesDriven > 0 || gallon > 0) {
var table = document.getElementById("table-body");
var row = table.insertRow(0);
var cellOne = row.insertCell(0);
var cellTwo = row.insertCell(1);
var cellThree = row.insertCell(2);
cellOne.innerHTML = gallon;
cellTwo.innerHTML = milesDriven;
cellThree.innerHTML = mpg;
var milesDriven = prompt("Enter miles driven:", "0");
var gallon = prompt("Enter gallons used:", "0");
parseInt(milesDriven);
parseInt(gallon);
var mpg = milesDriven / gallon;
}
Currently this won’t run, but I think I’m on the right track?
You’re repeating way too much code here. I’m not sure what your second version has to gain over your first version? In fact, I’m not sure what you are exactly trying to do. I think you need to spell it out for us.
So I’d like it to prompt the user, but if the value is lower or equal to 0 to not create a table and stop running. The issue I had with the while loop is that it would still print out the negative values or a 0 into the table. I can’t figure out how to break out of the loop before calculating without an additional check. So by repeating the code I was hoping to run it once before entering the loop, that way I could hopefully set my while loop condition to check the variable values before running.
The first thing you did in the while loop was prompt the user for miles and then the very next thing you did was check what they entered to see whether you needed to break out of the loop. That is exactly what you said you wanted to do. So theoretically it should have worked. I did noticed that you had the check as:
if (milesDriven < 0) {
Which means that entering 0 wouldn’t have stopped the loop. Also, the paranoid programmer might convert what the user entered to a Number and then check to make sure it is actually a Number.