Javascriptを使い、ちょっとしたランチャーを作っています。
デバッグ用にalertを挟んでいるのですが、どうしてもうまく行かない点が2点あります。
<詰まって居るところ>
.alert("aaa2")が読まれない。
varで宣言するところが読まれていないのか、var mini からalert("aaa4")の上までをコメントアウトすると、alert("aaa4")から終わりまで通ります。
・launcherWrapがdraggableにならない(alert("aaa6")です)。
職場の先輩に聞いてもよく分からないと言われてしまい、困っております。
どなたかご教示いただけますようお願いいたします。
<div class="launcherGroup"> <header>Launcher Test</header> <div class="launcherWrap"> <div class= "toolbox" id="matomari"><img src="images/matomari.png" /></div> <div class="borderDiv"></div> <div class= "toolbox-minimum" id="minimum"><img src="images/minimum.png" /></div> </div> <div class="Button"><span>表示設定</span></div> </div>
<script> alert("aaa1"); var mini = document.getElementById("minimum"); var launcher = document.getElementsClassName("launcherWrap"); alert("aaa2"); $(mini).click(function(){ alert("aaa3"); if(launcher.style.display="block"){ launcher.style.display="none"; }else{ launcher.style.display="block"; } }); alert("aaa4"); $(document).click(function(){ }); $(function() { alert("aaa5"); $(".Button" ).draggable(); }); $(function() { alert("aaa6"); $(".launcherWrap" ).draggable(); }); alert("aaa2"); $(mini).click(function(){ alert("aaa3"); if(launcher.style.display="block"){ launcher.style.display="none"; }else{ launcher.style.display="block"; } }); </script>
<style> .Button{ width:100px; height:20px; border: 3px solid white; background-color: #0080FF; border-radius:10px; font-size:15px ; font-weight:bold; padding:10px; color:white; text-align: right; line-height: 20px; } .launcherWrap { width:320px; height: 50px; border: 1px solid #0080FF; background-color: white; border-radius:10px; justify-content: space-evenly; display: -webkit-flex; line-height: 50px; } #matomari{ width:105px; height: 40px; margin:5px; text-align: center; margin-bottom:auto; box-sizing: border-box; justify-content: space-evenly; } #kakikomi{ width:105px; height: 40px; margin:5px; margin-bottom:auto; box-sizing: border-box; text-align: center; justify-content: space-evenly; } a > span{ width:130px; height: 40px; font-size: 20px ; font-weight:bold; padding:5px; text-align:center; margin:3px 4px ; border: 1px solid #0080FF; border-radius:10px; } #minimum{ width:60px; height: 40px; margin:5px; margin-bottom:auto; box-sizing: border-box; justify-content: space-evenly; } .borderDiv { background: #97938a; display: block; width: 2px; height: 30%; top: 0; bottom: 0; margin-bottom: auto; margin-top: auto; } img{ width:35px; height:35px; } </style>
回答2件
あなたの回答
tips
プレビュー