Question

程序本身可以正常运行。但是，我的输出并不像我想的那么干净。我在每个循环迭代中使用了一些&nbsp来输出一个有点样式的列。我想知道在不使用&nbsp的情况下是否会有更好的输出方法，或者如果完善空间猜测的艺术只是随着时间而来？

我的功能：

    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年前网络新时所做的事情。）

此外，您的代码中存在大量冗余。这是一个清理版本：

＆＃13;

// 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.";

});

＆＃13;

/* 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; }

＆＃13;

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

＆＃13;

Answer 2

document.write与innerHTML
 代表“不间断的空间”。它应该只用于解决一些众所周知的排版问题。例如，在法语中，您需要在单词和问号之间留出不间断的空格。在这里使用 。
当您开发网站（甚至是静态网页）时，您应始终区分内容（HTML），演示文稿（CSS）和行为（JS）。

在这里，您尝试使用HTML进行一些演示。这显然是错误的。你必须使用CSS。：）

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

2 个答案: