我想这很简单，但我在这方面完全是新手。我尝试在 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 fiddle 链接是:http://jsfiddle.net/fVQVy/作为解决方案发布在这里 感谢大家的耐心等待...非常感谢...
最佳答案
试试这个 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/>';
}
更新以处理重复项
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;
}
}
关于JavaScript:列表不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10113762/