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

重複を処理するための 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-11T20:57:03.477 に答える
1

reply_click() を実行するたびに配列を再作成しています。さらに、下部のスクリプトは、ページの読み込み中に 1 回だけ実行されます。次の実例を参照してください - http://jsfiddle.net/fVQVy/

于 2012-04-11T21:02:16.867 に答える
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が呼び出されるたびに、配列は空の配列に初期化され、前のエントリが上書きされます。また、追加するのではなく、毎回 2 番目のエントリ (キー 1) を上書きしています。

関数の外で、グローバル スコープに移動します。

編集:あなたのためのフィドル: http://jsfiddle.net/3v4W2/1/

于 2012-04-11T20:53:47.317 に答える
0

コードdocument.writeは、ページが読み込まれるときに 1 回実行され、その時点baskeItemsでは空です。

クリックするたびにページを動的に更新する場合は、ドキュメントを更新する関数を作成し、クリックするたびにその関数を呼び出す必要があります

于 2012-04-11T20:52:52.777 に答える