在乾淨的列中輸出動態文本

對於所有意圖和目的，程序本身運行良好。但是，我的輸出並不像我想的那麼幹淨。我在每個循環迭代中使用了多個&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."; 
}

來源

2017-04-18 Ryan Mann

沒有什麼比使用'' 更好的方法。我建議讀一下CSS，讓它更適合HTML。 –

如果您想顯示錶格，請使用'

'。 – Barmar

使用' '進行佈局是我們在網絡初期所做的。您應該使用HTML表格或CSS進行佈局。 – Amy

回答

document.write是不一樣的東西innerHTML
 代表「非換空間」。它只能用於解決一些着名的排版問題。例如，在法語中，你需要在一個單詞和一個問號之間有一個不間斷的空格。這裏使用 是有意義的。
當你開發一個網站（即使是靜態頁面），你應該總是區分內容（HTML），該呈現（CSS）和行爲（JS）。

這裏您試圖使用HTML進行一些演示。這顯然是錯誤的。你必須使用CSS。 :)

來源

2017-04-18 21:11:52 Badacadabra

當數據是表格時，表格是最佳選擇。從那裏，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>

來源

2017-04-18 21:22:58

相關問題