JavaScript button.onclickが機能しません

-1

最近私のWebページでJavaScriptを使用する方法を学び始めました。私の運動は今日ボタンを私にの形を与えることができるようにすることです。JavaScript button.onclickが機能しません

V字状を作成するために、コードは結構ですが、私はクリックハンドラ（すなわちoBtn.click = function(){};）に入れしようとすると、それは動作しません。私はこの権利を理解していれば

<style> 
    div{ 
     width: 50px; 
     height: 50px; 
     border: 1px red solid; 
     position: absolute; 
     line-height: 50px; 
     text-align: center; 
     margin: 5px; 
    } 
</style> 
<script type="text/javascript"> 
    window.onload = function(){ 
     var oBody = document.getElementById('body'); 
     var aDiv = document.getElementsByTagName('div'); 
     var oBtn1 = document.getElementById('btn1'); 

     for (var i = 0; i < 9; i++) { 
      oBody.innerHTML += '<div>'+ i +'</div>'; 
     } 
     for (var i = 0; i < aDiv.length; i++) { 
      aDiv[i].style.left =i*50+'px'; 
     } 

     oBtn1.onclick = function(){ 
     for (var i = 0; i < aDiv.length/2; i++) { 
      aDiv[i].style.top = 40+i*50+'px'; 
     } 
     var x = aDiv.length; 
     for (var i = 4; i < x; i++) { 
      aDiv[i].style.top =x*50-i*50-50+40+'px';  
     } 
     }; 
    }; 
</script>

出典

2016-08-31 Chenglin Kang

代わり直接のonclickハンドラの設定【のaddEventListener（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener）を使用してみてください。 'oBtn1.addEventListener（" click "、function（）{...}）;' – Tibrogargan

[子孫のイベントリスナーを破棄せずにinnerHTMLに追加することはできますか？]（http://stackoverflow.com/questions）/595808/in-it-possible-to-append-to-innerhtml-without-destroying-descendants-event-list） –

-2

、あなたはクリックイベントとして「oBtn1.onclick」を実行したい：私は、次のコードを持つHTML文書で

？もしそうなら、それが何をするか、この

function buttonClick(){ 
for (var i = 0; i < aDiv.length/2; i++) { 
      aDiv[i].style.top = 40+i*50+'px'; 
} 

oBtn1.addEventListener('click', buttonClick);

のようなものは、ID「oBtn1は」それはあなたのforループを実行しますクリックすると含まれている要素とすぐにあるん。

出典

2016-08-31 21:26:07 menix

-2

あなたのHTMLの外観はどうですか？あなたがこの種のもののためにaddEventListenerを使用することを見なければならないけれども、以下のスニペットのように見えるなら、それは働くべきです。

window.onload = function(){ 
 
     var oBody = document.getElementById('body'); 
 
     var aDiv = document.getElementsByTagName('div'); 
 
     var oBtn1 = document.getElementById('btn1'); 
 

 
     for (var i = 0; i < 9; i++) { 
 
      oBody.innerHTML += '<div>'+ i +'</div>'; 
 
     } 
 
     for (var i = 0; i < aDiv.length; i++) { 
 
      aDiv[i].style.left =i*50+'px'; 
 
     } 
 

 
     oBtn1.onclick = function(){ 
 
      for (var i = 0; i < aDiv.length/2; i++) { 
 
       aDiv[i].style.top = 40+i*50+'px'; 
 
      } 
 
      var x = aDiv.length; 
 
      for (var i = 4; i < x; i++) { 
 
       aDiv[i].style.top =x*50-i*50-50+40+'px';  
 
      } 
 
     }; 
 
    };

div{ 
 
     width: 50px; 
 
     height: 50px; 
 
     border: 1px red solid; 
 
     position: absolute; 
 
     line-height: 50px; 
 
     text-align: center; 
 
     margin: 5px; 
 
    }

<button id="btn1">press</button> 
 
<div id="body"></div>

出典

2016-08-31 21:27:18 bmceldowney

-1

私は、これはあなたが望んでいたものに近いと考えています。 chromeで動作しますが、他のブラウザ（IEなど）では動作しない可能性があります。スニペットとして動作しません、申し訳ありません。私は体内のすべての部門を修正しようとしていると思われますが、長期的にはトラブルを引き起こすでしょう。注目すべき物事のカップル：

あなたはあなただけdocument.bodyを使用することができ、名前で体を取得する必要はありません（私はここでの仮定を作ってるんだ - しかし、簡単に要素にID「身体」を可能性を与えます
DOMから配列を取得する前にdivを作成する必要があります
イベントハンドラは、一般的に推奨される方法を使用して実行されます。

<html> 
<head> 
<style> 
    div{ 
     width: 50px; 
     height: 50px; 
     border: 1px red solid; 
     position: absolute; 
     line-height: 50px; 
     text-align: center; 
     margin: 5px; 
    } 
</style><script> 
window.addEventListener("DOMContentLoaded", function() { 
    for (var i = 0; i < 9; i++) { 
     document.body.innerHTML += '<div>'+ i +'</div>'; 
    } 

    var aDiv = document.getElementsByTagName('div'); 
    for (var i = 0; i < aDiv.length; i++) { 
     aDiv[i].style.left =i*50+'px'; 
    } 

    document.getElementById('btn1').addEventListener("click", function() { 
     for (var i = 0; i < aDiv.length/2; i++) { 
      aDiv[i].style.top = 40+i*50+'px'; 
     } 
     var x = aDiv.length; 
     for (var i = 4; i < x; i++) { 
      aDiv[i].style.top =x*50-i*50-50+40+'px'; 
     } 
    }); 
}, false); 
</script> 
</head> 
<body> 
    <input type="button" id="btn1"><br /> 
</body> 
</html>

出典

2016-08-31 21:38:43 Tibrogargan

JavaScript button.onclickが機能しません

答えて

関連する問題