2017-05-05 11 views
1

2つのボタンがあります。いずれかのボタンをクリックすると、クリックしたボタンが表示されます。しかし、私のコードは動作していません。ボタンをクリックすると、ボタンのそれぞれのIDが表示されます。私は間違いがどこにあるのか分からなかった。ありがとうございました。jquery on click機能が表示されない

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 

    $(".btn").click(function(){ 

var qn=$(this).attr("id"); 
("#two").html.("you clicked on button"+qn); 

}); 

}); 
</script> 
<style> 
#one 
{ 
    width:100%; 
    height:70px; 
    background-color:green; 
    clear:both; 
} 
#two 
{ 
    width:75%; 
    height:250px; 
    overflow-y:scroll; 
    float:left; 
} 
#three 
{ 
    width:24.5%; 
    height:50px; 
    float:right; 
    float:right; 
} 
.btn 
{ 
    width:45px; 
    height:45px; 
    align-text:center; 
} 
</style> 
</head> 
<body> 
<div id="one"></div> 
<div id="two"></div> 
<div id="three"> 
    <?php 
    $i=1; 
    for($i=1;$i<3;$i++) 
    { 
     echo"<button class='btn' id='$i' value='$i'>$i</button>"; 
    } 
    ?> 
</div> 
</body> 

+0

あなたのボタンがクラス.btnを持っていない:

それはここではフィドルだ

html(), not html.(). 

でなければなりません。 jQueryのセレクタは何も返しません – user3154108

+1

あなたは型エラー '(" #two ")html。()' $( "#two")でなければなりませんhtml() ' –

+0

時には小さなミスが大きな頭痛につながることがあります。その働きのおかげで多くは – PAVAN

答えて

0

をあなたはjQueryのシンボル$を逃す最初

<script> 
$(document).ready(function(){ 

    $(".btn").click(function(){ 

var qn=$(this).attr("id"); 
$("#two").html("you clicked on button"+qn); 

}); 

}); 
</script> 

および追加

$("#two").html("you clicked on button"+qn); 

そしてない

("#two").html.("you clicked on button"+qn); 

そして第二に、あなたのコードの下にJavaScriptを置くあまり望ましい

+0

ありがとう、その仕事。 – PAVAN

0

これを試してみてください。それがあるべき余分.html後の機能

+0

ありがとう友人の仕事 – PAVAN

+0

@パヴァンあなたは大歓迎です。 – Ashiquzzaman

0

あなたはhtml.()近くにタイプミスをしたとも、あなたのスクリプトで("#two").$を逃しました。それは次のとおりです。

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     var qn=$(this).attr("id"); 
     $("#two").html("you clicked on button"+qn); 
    }); 

}); 
0

これを確認してください。それは働いている。

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
\t $(".btn").click(function(){ 
 
     var qn=$(this).attr("id"); 
 
    alert(qn) 
 
\t }); 
 
}); 
 
</script> 
 
<style> 
 
#one 
 
{ 
 
    width:100%; 
 
    height:70px; 
 
    background-color:green; 
 
    clear:both; 
 
} 
 
#two 
 
{ 
 
    width:75%; 
 
    height:250px; 
 
    overflow-y:scroll; 
 
    float:left; 
 
} 
 
#three 
 
{ 
 
    width:24.5%; 
 
    height:50px; 
 
    float:right; 
 
    float:right; 
 
} 
 
.btn 
 
{ 
 
    width:45px; 
 
    height:45px; 
 
    align-text:center; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div id="one"></div> 
 
<div id="two"></div> 
 
<div id="three"> 
 
    <button class='btn' id='1' value='1'>1</button> 
 
    <button class='btn' id='2' value='1'>2</button> 
 
    <button class='btn' id='3' value='1'>3</button> 
 
     
 
    
 
</div> 
 

 
</body> 
 
</html>

ちょうどあなたのPHPタグ内のループのためにと私のコードを置き換えます。

関連する問題