2012-04-11 43 views
0

夠簡單我猜,但我是一個在這個總新手。我嘗試在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/這裏張貼的解決方案 並感謝大家的耐心......不勝感激....

回答

2

試試這個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; 
    } 
} 
+0

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

+0

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

+0

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

0

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

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

+0

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

+0

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

1

的每次通過時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> 
+0

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

+0

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

+0

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

1

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

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

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

1

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

+0

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

+0

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

+1

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