JavaScript：列表不顯示

夠簡單我猜，但我是一個在這個總新手。我嘗試在PHP中做這個，但後來重新考慮在JS中做這件事，所以我需要一些幫助。該代碼：JavaScript：列表不顯示

<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript"> 
function reply_click(clicked_id) 
{ 
    alert(clicked_id); 
    var basketItems=new Array(); 
    //var i = 0; 
    basketItems[1] = clicked_id; 

} 


</script> 
</head> 
<body> 



    <table height="100%" width="80%" cellspacing="10" cellpadding="10" border="1"> 
     <tr> 
      <td align="center"><input onClick="reply_click(this.name)" name="shirt" value="shirt" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="pants" value="pants" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="socks" value="socks" style="width:200px; height:100px;" type="submit"/></td> 
     <tr> 
     <tr> 
      <td align="center"><input onClick="reply_click(this.name)" name="dress" value="dress" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="skirt" value="skirt" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="topbody" value="topbody" style="width:200px; height:100px;" type="submit"/></td> 
     <tr> 
     <tr> 
      <td align="center"><input onClick="reply_click(this.name)" name="sheets" value="sheets" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="pillowcover" value="pillowcover" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="blanket" value="blanket" style="width:200px; height:100px;" type="submit"/></td> 
     <tr>   
    </table> 


<div style="width:18%; height:40%;position: absolute; top: 20px; right: 10px; border:2px solid;"> 
<script type="text/javascript"> 
var counter=0; 
for (counter=0; counter<basketItems.length; counter++) 
    document.write(basketItems[counter] + "<br>"); 
</script> 
</div> 
<br><br><br>

現在我預計會發生。我點擊按鈕，警報出來與點擊按鈕名稱...然後它添加到列表。在div標籤中顯示該列表之後。發生了什麼錯？它只是顯示警報，但沒有顯示在div標籤所以我假設一些錯誤插入到陣列或印刷...

感謝，

UPDATE：此代碼似乎上的jsfiddle工作，但不是我的巴羅什......任何線索有什麼不同？

<html> 
<head> 
    <title>Test</title> 
<script type="text/javascript"> 
var basketItems = []; 

function reply_click(clicked_id) 
{ 
    alert(clicked_id); 
    basketItems.push(clicked_id); 

    var html = ''; 
    for(var i = 0; i < basketItems.length; i++) { 
     html += basketItems[i] + '<br/>'; 
    } 

    document.getElementById('list').innerHTML = html; 
} 
</script> 
</head> 
<body> 



    <table height="100%" width="80%" cellspacing="10" cellpadding="10" border="1"> 
     <tr> 
      <td align="center"><input onClick="reply_click(this.name)" name="shirt" value="shirt" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="pants" value="pants" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="socks" value="socks" style="width:200px; height:100px;" type="submit"/></td> 
     <tr> 
     <tr> 
      <td align="center"><input onClick="reply_click(this.name)" name="dress" value="dress" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="skirt" value="skirt" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="topbody" value="topbody" style="width:200px; height:100px;" type="submit"/></td> 
     <tr> 
     <tr> 
      <td align="center"><input onClick="reply_click(this.name)" name="sheets" value="sheets" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="pillowcover" value="pillowcover" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="blanket" value="blanket" style="width:200px; height:100px;" type="submit"/></td> 
     <tr>   
    </table> 


<div id="list" style="width:18%; height:40%;position: absolute; top: 20px; right: 10px; border:2px solid;"> 

</div> 
</body> 
</html>

和JS小提琴鏈接：http://jsfiddle.net/fVQVy/這裏張貼的解決方案並感謝大家的耐心......不勝感激....

來源

2012-04-11 sys_debug

試試這個DEMO

<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript"> 
    var basketItems=[]; 

function reply_click(clicked_id) { 
    var html = ""; 
    basketItems.push(clicked_id); 
    for (var counter=0; counter<basketItems.length; counter++) 
     html += basketItems[counter] + "<br>"; 
    // or as posted html = basketItems.join('<br/>'); 
    document.getElementById("result").innerHTML = html; 
} 


</script> 
</head> 
<body>

而且使它成爲一個按鈕，並沒有提交，因爲可能會重新加載頁面

<table height="100%" width="80%" cellspacing="10" cellpadding="10" border="1"> 
     <tr> 
      <td align="center"><input onClick="reply_click(this.name)" name="shirt" value="shirt" style="width:200px; height:100px;" type="button"/></td> 
     <tr>   
    </table> 


<div id="result" style="width:18%; height:40%;position: absolute; top: 20px; right: 10px; border:2px solid;"> 

</div> 
<br><br><br>

UPDATE

這裏是如何只需添加到結果

function reply_click(clicked_id) { 
    basketItems.push(clicked_id); 
    document.getElementById("result").innerHTML+=clicked_id+'<br/>'; 
}

UPDATE處理重複

var basketItems=[]; 

function reply_click(clicked_id) { 
    if (basketItems.indexOf(clicked_id)==-1) basketItems.push(clicked_id); 
    document.getElementById("result").innerHTML = basketItems.join("<br>"); 
} 


// handle duplicates 
if(!Array.indexOf) { 
    Array.prototype.indexOf = function(obj){ 
    for(var i=0; i<this.length; i++){ 
     if (this[i]==obj) return i; 
    } 
    return -1; 
    } 
}

來源

2012-04-11 20:57:03 mplungjan

謝謝你這樣做......我得到第一個項目，但未定義。如果我想保持列表的狀態，那麼當我按下下一個按鈕時，它將添加到列表中而不是重建它？非常感謝 – 2012-04-11 20:59:30

我對未定義的部分進行了排序......只是在0而不是1時插入。其餘的怎麼樣？ – 2012-04-11 21:01:47

請參閱更新。另外改變提交按鈕 - 我需要去睡覺。晚上11點。 – mplungjan 2012-04-11 21:03:31

你document.write代碼被執行一次，當頁面被加載，並且當時baskeItems是空的。

如果要動態地更新每次點擊的頁面，你應該創造出更新的文檔的功能，調用該函數上點擊

來源

2012-04-11 20:52:52

其實basketItems在循環中總是空的，basketItems是reply_click函數的一個局部變量 – Jaime 2012-04-11 20:54:19

正如我所說的在這種情況下是一個總新手，所以你可以請幫助說明如何完成...曾經教過，總是會知道如何去做，並回憶它:) – 2012-04-11 20:54:51

的每次通過時reply_click被調用時，你的腳本叫document.write已經執行。

<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript"> 

    var basketItems = []; 
    function reply_click(clicked_id) { 
     // This does not handle duplicate clicks, leave that up to you 
     basketItems.push(clicked_id); 
     var out = document.getElementById('output'); 
     out.innerHTML = basketItems.join('<br/>'); 
    } 
</script> 
</head> 
<body> 
    <table height="100%" width="80%" cellspacing="10" cellpadding="10" border="1"> 
     <tr> 
      <td align="center"><input onClick="reply_click(this.name)" name="shirt" value="shirt" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="pants" value="pants" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="socks" value="socks" style="width:200px; height:100px;" type="submit"/></td> 
     <tr> 
     <tr> 
      <td align="center"><input onClick="reply_click(this.name)" name="dress" value="dress" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="skirt" value="skirt" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="topbody" value="topbody" style="width:200px; height:100px;" type="submit"/></td> 
     <tr> 
     <tr> 
      <td align="center"><input onClick="reply_click(this.name)" name="sheets" value="sheets" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="pillowcover" value="pillowcover" style="width:200px; height:100px;" type="submit"/></td> 
      <td align="center"><input onClick="reply_click(this.name)" name="blanket" value="blanket" style="width:200px; height:100px;" type="submit"/></td> 
     <tr>   
    </table> 


<div id='output' style="width:18%; height:40%;position: absolute; top: 20px; right: 10px; border:2px solid;"> 

</div>

來源

2012-04-11 20:53:26

+1推和加入。當我修復其他腳本時，我會一直忘記那些 – mplungjan 2012-04-11 21:00:34

任何想法爲什麼從更新答案以來，上述評論未顯示列表？ – 2012-04-11 21:16:21

@sys_debug你的問題針對誰？ – 2012-04-11 23:19:34

你basketItems陣列會每次你的函數調用時被初始化爲空數組，覆蓋以前的條目。另外，你沒有增加它，你每次都覆蓋第二個條目（鍵1）。

將它移到函數外部，進入全局範圍。

編輯：一種你撥弄：http://jsfiddle.net/3v4W2/1/

來源

2012-04-11 20:53:47 Josh

你現在重新創建每次執行reply_click時間（陣列）。而且，底部的腳本僅在頁面加載期間執行一次。請看下面的工作示例 - http://jsfiddle.net/fVQVy/

來源

2012-04-11 21:02:16 tjscience

這段代碼完全符合我在jsfiddle中的要求，但不能在我的副本中工作...... :( – 2012-04-11 21:26:43

你能發佈你的修改後的代碼嗎？ – tjscience 2012-04-11 21:35:01

@sys_debug'不工作'沒有解釋顯示很少的努力。錯誤是你得到了嗎？新代碼在哪裏？ – 2012-04-11 23:18:55

JavaScript：列表不顯示

回答

相關問題