Question

我觉得很简单，但我是一个新手。我尝试在PHP中执行此操作但后来重新考虑在JS中执行此操作，因此我需要一些帮助。代码：

<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标签中没有显示任何内容，所以我假设插入数组或打印出错了...

谢谢，

更新：此代码似乎适用于jsfiddle，但不适用于我的broswer ...任何线索有什么不同？

<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/在此处作为解决方案发布感谢所有人的耐心......非常感谢......

Answer 1

试试这个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>

更新

以下是如何添加到结果

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;
  }
}

Answer 2

当调用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>

Answer 3

每次调用函数时，您的basketItems数组都将初始化为空数组，覆盖以前的条目。此外，你没有添加它，你每次都要覆盖第二个条目（键1）。

将其移出函数，进入全局范围。

编辑：您的小提琴：http://jsfiddle.net/3v4W2/1/

Answer 4

每次执行reply_click（）时都在重新创建数组。此外，底部的脚本仅在页面加载期间执行一次。请参阅以下工作示例 - http://jsfiddle.net/fVQVy/

Answer 5

您的document.write代码在加载页面时执行一次，此时baskeItems为空。

如果您想在每次点击时动态更新页面，您应该创建一个更新文档的功能，每次点击都会调用该功能

JavaScript：列表不显示

5 个答案: