我正在尝试添加用户提示以添加到我拥有的表中，但我无法弄清楚

Question

I'm trying to make it to where when the user is asked the question it will input into the cell on the table.

I'm needing to the ask a user to enter the answer to the question asked and I've looked all over and can't seem to find a way.

 var trip; var miles; var gallons; var mpg; trip = parseFloat(prompt("Enter your trip location")); miles = parseFloat(prompt("Enter miles driven")); gallons = parseFloat(prompt("Enter gallons of gas used")); 

 <table id="myTable"> <tr> <td> |Trip Name|</td> <td> |Miles Driven| </td> <td> |Gallons Used| </td> <td> |MPG| </td> </tr> <tr> <td>Row 2 cell1 </td> <td>Row2 cell2</td> <td>Row2 cell3</td> <td>Row2 cell4</td> </tr> <tr> <td>Row3 cell1</td> <td>Row3 cell2</td> <td>Row3 cell3</td> <td>Row3 cell4</td> </tr> <tr> <td>Row4 cell1</td> <td>Row4 cell2</td> <td>Row4 cell3</td> <td>Row4 cell4</td> </tr> <tr> <td>Row5 cell1</td> <td>Row5 cell2</td> <td>Row5 cell3</td> <td>Row5 cell4</td> </tr> </table> 

Answer 1

Short Answer

Saving the answer given to a prompt in variable won't make it appear in the document. To do that, you must select the cell wherein you want it to appear and set its textContent property as shown below:

var cell = document.querySelector("selector-of-the-cell");
cell.textContent = prompt("...");

---

Long Answer

In your current JavaScript code, you're repeatedly doing the same thing using the same code over and over again. As your application scales up, things are going to get messy there.

An alternative I suggest is using a data-* attribute, like data-question for instance, and save each question to the column title it concerns. This way, in order to make the code work as desired you will only need to:

• get the titles (aka the cells of the first row) and the cells of the second row.
• iterate over the titles and use each one's question inside prompt .
• save the result in the textContent of the cell under the title.

You can see the above suggestion implemented in the following working snippet.

Snippet:

 /* ----- JavaScript ----- */ /* Get all column titles. */ var titles = document.querySelectorAll("#myTable th"); var cells = document.querySelectorAll("#myTable td"); /* Iterate over every title. */ [].forEach.call(titles, function(title, index) { /* Get the question associated with the title. */ var question = title.dataset.question; /* Parse and save the result of the question in the cell under the title. */ cells[index].textContent = prompt(question); }); 

 /* ----- CSS ----- */ #myTable { border-collapse: collapse; } #myTable tr>* { padding: .5em; border: 1px solid #ccc; } 

 <!---- HTML -----> <table id="myTable"> <thead> <th data-question="Enter your trip location">Trip Name</th> <th data-question="Enter miles driven">Miles Driven</th> <th data-question="Enter gallons of gas used">Gallons Used</th> <th data-question="Enter your speed">MPG</th> </thead> <tbody> <tr> <td>Row1 cell1</td> <td>Row1 cell2</td> <td>Row1 cell3</td> <td>Row1 cell4</td> </tr> </tbody> </table>