0

我想很简单，但我在这方面完全是新手。我尝试在 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，但不适用于我的浏览器......任何线索有什么不同？

<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/作为解决方案发布在这里感谢大家的耐心等待......非常感谢......

4

5 回答 5

2

试试这个演示

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

更新处理重复

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-11T20:57:03.477 回答
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>
于 2012-04-11T20:53:26.177 回答
1

basketItems每次调用您的函数时，您的数组都将被初始化为一个空数组，从而覆盖以前的条目。此外，您不是在添加它，而是每次都覆盖第二个条目（键 1）。

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

编辑：给你一个小提琴：http: //jsfiddle.net/3v4W2/1/

于 2012-04-11T20:53:47.317 回答
1

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

于 2012-04-11T21:02:16.867 回答
0

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

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

于 2012-04-11T20:52:52.777 回答