0

ある関数から別の関数に値を渡す方法がわかりません。Web ページに表示されるフォームの値を使用してボックスを作成するプログラムを作成しました。私が話している値は、ボックス自体のプロパティ値です。

ボックスに値が割り当てられる関数は次のとおりです。

function addBox(newbox) {  
       for (var i = 0; i < newbox.number; i++) { 
       counter++;
       var id = counter;                          
       var scene = document.getElementById("scene");              
       var div = document.createElement("div"); 
       div.value = id;
       console.log(div.value);                  
       div.className += " " + "box"; 
       div.innerHTML += newbox.name; 
       div.style.backgroundColor = newbox.color; 
       var x = Math.floor(Math.random() * (scene.offsetWidth-101));
       var y = Math.floor(Math.random() * (scene.offsetHeight-101));
       div.style.left = x + "px";
       div.style.top = y + "px"; 
       scene.appendChild(div); 
       div.onclick = display;              
        }                      
      }

これは、値を渡すのに問題がある関数です。各ボックスをクリックしたときに警告ボックスに表示できるように、それらを渡す必要があります。

  function display(e) {
  alert(e.target.toSource());
  }

これまでのところ、クリックすると、警告ボックスに空の括弧のペアが表示されます。

4

1 に答える 1

0

JS Fiddle であなたの例を試してみました: http://jsfiddle.net/jCC6n/

少なくとも 2 つの問題が発生しています。

  1. 「カウンター」は定義されていないため、最初にインクリメントしようとするとコードが失敗します。関数の先頭に変数宣言を追加しました。
  2. toSource は未定義です。これを「outerHTML」に置き換えました。これは、Chrome、IE、およびおそらく他のブラウザーで動作します。

上記の変更により、これは機能しました。

function display(e) {
    alert(e.target.outerHTML);
}

function addBox(newbox) {  
    var counter = 0;
    for (var i = 0; i < newbox.number; i++) { 
        counter++;
        var id = counter;                          
        var scene = document.getElementById("scene");              
        var div = document.createElement("div"); 
        div.value = id;
        div.className += " " + "box"; 
        div.innerHTML += newbox.name; 
        div.style.backgroundColor = newbox.color; 
        var x = Math.floor(Math.random() * (scene.offsetWidth-101));
        var y = Math.floor(Math.random() * (scene.offsetHeight-101));
        //div.style.left = x + "px";
        //div.style.top = y + "px"; 
        scene.appendChild(div); 
        div.onclick = display;              
    }                      
}

addBox({ number: 3, name: "Hello", color: '#C00' });

onclick イベント ハンドラーを使用したイベント処理は、ブラウザーによって異なることに注意してください。すべての違いを認識し、統一された方法でイベントを処理できる JavaScript フレームワークを使用することをお勧めします。jQuery は、間違いなく最も使用されているそのようなフレームワークです。

于 2013-01-18T21:25:39.533 に答える