実現したいこと
- ボタンをクリックした回数分イベント発火させたいです。（console.logはクリックした分だけ表示されています）
該当のソースコードで、ボタンをクリックした分だけ、<div id="youso">要素１</div>が移動するように実装したいです。
現状は一回しか要素が移動しません。
発生している問題・エラーメッセージ
なし
該当のソースコード
index.html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 8 <title>Document</title> 9</head> 10<body> 11 <div class="btn1">ボタン１</div> 12 <div id="youso">要素１</div> 13 <input type="button" value="ボタン２" class="btn2" onclick="myfunc1();"> 14 <script> 15 16var myfunc1 = function () { 17 document.getElementById("youso").style.transform = "translate(10%, 0%)"; 18 } 19 20jQuery(function() { 21 22 jQuery('.btn1').click(function() { 23 document.getElementById("youso").style.transform = "translate(10%, 0%)"; 24 console.log('押された'); 25 }); 26 27 28 var myfunc1 = function () { 29 document.getElementById("youso").style.transform = "translate(10%, 0%)"; 30 31 } 32}); 33 </script> 34</body> 35</html>
試したこと
javascriptでもjQueryでも試しましたができません。
https://mebee.info/2020/08/13/post-16557/などのサンプルコードと見比べても何が違うのか分かりませんでした。
補足情報（FW/ツールのバージョンなど）
Visual Studio Code使用しています。
0 コメント