如何在HTML文本的其他部分輸入文本？

我想顯示文本的隨機件，所以我偶然發現了這個代碼：如何在HTML文本的其他部分輸入文本？

<html> 
<head> 
    <script type="text/javascript"> 
    var textarray = [ 
     "hi", 
     "hello there", 
     "how r u", 
     "where r u" 
    ]; 

    function RndText() { 
     var rannum= Math.floor(Math.random()*textarray.length); 
     document.getElementById('ShowText').innerHTML=textarray[rannum]; 
    } 

    onload = function() { RndText(); } 

</script> 
</head> 
<body> 
    <div id="ShowText"></div> 
</body> 

</html>

不過，我需要做的是有動態輸入在我textarray，讓我們從一個內容說無序列表：

<div id"textPool"> 
    <ul> 
     <li>Hi</li> 
     <li>hello</li> 
    </ul> 
</div>

這怎麼可能？

感謝所有幫助...

來源

2013-10-23 Panos Vakalopoulos

使用'的getElementById（）'找到DIV，'的getElementsByTagName（）'找到所有裏面的李元素，遍歷它們，並添加'.innerHTML'你的陣列。 – Barmar

你想如何創建/填充數組？你的問題根本不明確。 – lexith

panos，檢查我的答案與驗證結果。給定**小提琴**。 –

在這裏你去。

function randomText() { 
    var textPool = document.getElementById("textPool"); 
    var listItems = textPool.getElementsByTagName("li"); 
    var texts = []; 

    for(var i = 0; i < listItems.length; i++) { 
     texts.push(listItems[i].innerText); 
    } 

    var random = Math.floor(Math.random()*listItems.length); 
    document.getElementById('ShowText').innerHTML = texts[random]; 
} 

window.onload = randomText;

Fiddle example

來源

2013-10-23 18:42:37 akinuri

我認爲，這是訣竅。非常感謝你！保存我的......你知道！ –

-1

如果你是開放的使用jQuery那麼下面的工作：

document.getElementById('ShowText').innerHTML=$('#textPool li:eq('+rannum+')').text();

來源

2013-10-23 17:49:52 deepakborania

你可以使用

var textArray = document.getElementById('somelistid').getElementsByTagName('li')

這會給你一個數組。然後你可以用數組設置這樣的文本。

document.getElementById('ShowText').innerHTML=textarray[rannum].innerHTML;

你應該真的開始使用jQuery。

var textArray = ('#somelistid').find('li');

當您稍後設置它時，您將使用.text（）方法而不是innerHTML。這應該運行得更快。

我實際上認爲你應該開始尋找像angularJS這樣的東西。

下面是一些簡單的例子http://www.tomharris.net/test/angularJS

在這裏，大練兵 http://angularjs.org/

來源

2013-10-23 17:56:42

我與你的問題發揮各地，但我不知道，如果結果與你想要什麼適合。看看這個演示，讓我知道：http://jsfiddle.net/wared/VL8EU/ :)

init：根據當時的acutal HTML列表調用shuffle填充textarray。
addInput：向textarray添加一個新項目，然後調用showList。
showList：輸出textarray的內容。
shuffle：隨機輸出一個項目。

來源

2013-10-23 18:17:15 leaf

使用下面的代碼（在textarray的微小變化和RndText()功能）：

<html> 
<head> 
    <script type="text/javascript"> 
    var textarray = []; 

    function RndText() { 
     for(var i=0; i<document.getElementById('textPool').getElementsByTagName('li').length; i++) 
      textarray.push(document.getElementById('textPool').getElementsByTagName('li')[i].innerHTML); 
     var rannum= Math.floor(Math.random()*textarray.length); 
     document.getElementById('ShowText').innerHTML=textarray[rannum]; 
    } 

    onload = function() { RndText(); } 

</script> 
</head> 
<body> 
    <div id="ShowText"></div> 
    <ul id="textPool"> 
     <li>hi 
     <li>hello there 
     <li>how r u 
     <li>where r u 
    </ul> 
</body> 

</html>

這裏是fiddle

來源

2013-10-23 18:40:38

如何在HTML文本的其他部分輸入文本？

回答

相關問題