javascript - 在干净的列中输出动态文本

Question

该程序本身在所有意图和目的上都运行良好。然而，我的输出并不像我想要的那么干净。我在每个循环迭代中使用多个   来输出某种风格的列。我想知道如果不使用   是否会有更好的输出方法，或者完善空间猜测的艺术是否需要时间？

我的功能:

    function secret(){
    var month = prompt("Enter the month:");
    var dumplings = prompt("How many dumplings did Po eat?");

    var total = parseInt(dumplings);
    var test = false;

    document.getElementById("title").innerHTML = "Month&nbsp&nbsp&nbsp&nbsp&nbsp&nbspNumber of Dumplings<br>";
    document.getElementById("decision").innerHTML += month.toUpperCase()+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+dumplings+" dumplings<br>";
    do{
        var month = prompt("Enter another month or enter 'done' when finished:");

        if (month == "done"){
            test = true;
            break;
        }

        var dumplings = prompt("How many dumplings did Po eat?");
        total += parseInt(dumplings);
            document.getElementById("decision").innerHTML += month.toUpperCase()+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+dumplings+" dumplings<br>";
    }while (test != true)


    document.getElementById("phrase").innerHTML += "Po ate a total of "+total+" dumplings.";
}   

Answer 1

当数据为表格时，表格是最佳选择。从那里开始，CSS 控制所有样式。永远不要使用 HTML 元素进行格式化(这就是 100 年前网络刚刚诞生时我们所做的)。

此外，您的代码中有很多冗余。这是一个清理后的版本:

// Run the code when the document is ready
window.addEventListener("DOMContentLoaded", function(){

  // Set up variables that function will work with
  var month = null;
  var dumplings = null;
  var total = null;
  var test = false;
  
  // Get references to the HTML elements that we'll need:
  var tbl = document.getElementById("tbl");    
  var result = document.getElementById("result"); 
  
  // Begin loop
  do {
      
    month = prompt("Enter month or enter 'done' when finished:");
    if (month === "done"){
      test = true;
      break;
    }
    
    // We will want to work with this answer as a number, so we'll parse the
    // integer out of it (using base 10).
    dumplings = parseInt(prompt("How many dumplings did Po eat?"), 10);

    // Create a new row for the table
    var row = tbl.insertRow();
    
    // Create a new cell in that row at position 0
    var cell = row.insertCell(0);
    
    // Populate the cell (use textContent instead of innerHTML when no HTML will be used)
    cell.textContent =  month.toUpperCase();
    
    // Repeat for second cell in row
    cell = row.insertCell(1);
    cell.textContent =  dumplings;
      
    // Add dumpling count to the total
    total += dumplings;
    
  } while (!test)
  
  // Once we are out of the loop, remove the hidden class from the table (thus, showing it)
  tbl.classList.remove("hidden");

  // Update the result area with the total.
  result.textContent += "Po ate a total of " + total + " dumplings.";

});

/* CSS allows us to query the document for elements and indicate how they should be presented */

/* Here's a class that indicates that anything using it should not be displayed.
   The HTML table has class="hidden" so that it starts off not shown.             */
.hidden { display:none; }

/* Give the table a background color */
table { background-color:aliceblue; }

/* Put some space around all 4 edges of each cell */
th, td { padding:3px; }

<h1>Poe's Dumpling Log:</h1>
<table class="hidden" id="tbl">
   <thead>
     <tr>
       <th>Month</th>
       <th>Dumplings</th>
     </tr>
   </thead>
   <tbody>
   </tbody>
</table>

<div id="result"></div>