document.getElementById no line feed

我剛開始嘗試學習JavaScript並遇到問題。下面的代碼我希望看到我的輸入框和按鈕，然後是1,2，... 10。新行中的每個數字。我得到的是盒子下面的數字10。我沒有看到數字1,2，... 9document.getElementById no line feed

<html> 
 

 
<head> 
 
    <title>Test</title> 
 
</head> 
 
<style> 
 
    #pastetext { 
 
    color: blue; 
 
    font-weight: bold; 
 
    } 
 
    .enter { 
 
    border: 2px solid blue; 
 
    width: 200px; 
 
    height: 50px; 
 
    } 
 
</style> 
 

 
<script type="text/javascript"> 
 
    function abc() { 
 
    intext = document.getElementById("pastetext").value; 
 
    for (i = 1; i < 11; i++) { 
 
     document.getElementById("answer").innerHTML = i; 
 
    } 
 
    } 
 
</script> 
 

 

 
<body> 
 

 
    <input type="text" name="enter" class="enter" value="" id="pastetext" /> 
 
    <input type="button" id="btn" value="Click to Enter Data" onclick="abc();" /> 
 

 
    <div id="answer" style="color:red; padding-left:100px;"> 
 
    </div> 
 

 
</body> 
 

 
</html>

我所得到的是這樣的：enter image here

來源

2015-10-14 RobertG

學習前面的一件好事就是它被稱爲** JavaScript **，而不是Java。 – Pointy

爲什麼你期望在你每次**覆蓋''div'的'innerHTML'時看到多行？ –

你一遍又一遍設置innerHTML財產。正確設置完全取代了以前的內容。

你可以添加文字：

function abc(){ 
    var intext = document.getElementById("pastetext").value; 
    var answer = document.getElementById("answer"); 
    answer.innerHTML = ""; 
    for(var i=1; i <11; i++){ 
     answer.innerHTML += i + " "; 
    } 
}

注意，在你的函數中的局部變量必須按照var聲明。

來源

2015-10-14 21:33:00 Pointy

這工作完美，除了我想每個號碼在它自己的行。我試過「\ r」而不是「」，但它沒有奏效。 – RobertG

@RobertG你正在創建HTML。除非您適當地設置容器的樣式，否則HTML會將所有空白相同（換行符與空格相同），或者您明確地添加更多標記以強制垂直對齊。這不是JavaScript的事情，這是HTML/CSS的工作方式。 – Pointy

非常感謝。 – RobertG

document.getElementById no line feed

回答

相關問題