web-dev-qa-db-ja.com

.click（）イベントを画像に追加するにはどうすればよいですか？

Jose Faeti のおかげで、マウスクリックに基づいて画像を配置するスクリプトがあります。ユーザーが画像をクリックすると、スクリプトに示されている機能が実行されるように、次のコードに.click（）イベントを追加するためのヘルプが必要です。

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()

ご覧になりたい場合のために、コード全体を以下に示します。

<html>
<head>
 <script language="javascript" type="text/javascript">
 <!--

 document.getElementById('foo').addEventListener('click', function (e) {

var img = document.createElement('img');

img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');

e.target.appendChild(img);
});

  // -->
 </script>

</head>

<body>
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
</body>
</html>

助けて？

javascripteventsmouseevent
15
SS'

まず、この行

_<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
_

HTMLとJavaScriptを混合しています。それはそのようには機能しません。そこの.click()を取り除きます。

そこにあるJavaScriptを読むと、document.getElementById('foo')はIDがfooのHTML要素を探しています。持っていません。画像にそのIDを指定します：

_<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
_

または、関数にJSをスローし、HTMLにonclickを挿入することもできます。

_<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />
_

ただし、JavaScriptとHTMLを読んでみることをお勧めします。

他の人は、_<img>_をJSクリックバインディングの上に移動する必要があることについては正しいです。

27
mpen

存在する前にイベントを要素にバインドすることはできませんので、onloadイベントでそれを行う必要があります。

<html>
<head>
<script type="text/javascript">

window.onload = function() {

  document.getElementById('foo').addEventListener('click', function (e) {
    var img = document.createElement('img');
    img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
    e.target.appendChild(img);
  });

};

</script>
</head>
<body>
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
</body>
</html>
10
Guffa
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script type="text/javascript" >
function openOnImageClick()
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
 var img = document.createElement('img');
 img.setAttribute('src', 'tiger.jpg');
  img.setAttribute('width', '200');
   img.setAttribute('height', '150');
  document.getElementById("images").appendChild(img);


}


</script>
</head>
<body>

<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>

<div id="images" >
</div>

<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
<img src="Logo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />

</body>
</html>
1
Arun