前提・実現したいこと
HTML,CSS,Javascriptを使って、画像の抽選(ガチャ)をするプログラムを作りました。
CSSによって「表示される画像のサイズ」と「ボタンの位置」を指定しています。
発生している問題・エラーメッセージ
CSSが指定する二つの命令のうち、後から書いたほうしか反映されません。
「#gachaHatena{}」、「#gachaButton{}」の順に書くと画像は「#gachaHatena{}」で指定したはずのサイズにならず、
「#gachaButton{}」、「#gachaHatena{}」の順に書くとボタンは「#gachaButton{}」で指定したはずの位置になりません。
該当のソースコード
HTMLはこちらです。
HTML
1<html> 2 3 4 <head> 5 <meta charset="UTF-8"> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 7 <link rel="stylesheet" type="text/css" href="gachaTest.css"> 8 <script type="text/javascript" src="gacha.js"></script> 9 10 </head> 11 12 13 <body> 14 <!--ガチャを回す前に表示される画像--> 15 <img id="gachaHatena" src="./gacha.png"><br> 16 <!--ボタンを押すと画像の抽選がされる--> 17 <button id="gachaButton">ガチャを回す</button> 18 19 </body> 20 21 22</html>
CSSはこちらです。
CSS
1@charset "UTF-8" 2 3/*画像のサイズ*/ 4#gachaHatena { 5 width: 400px; 6 height: 500px; 7} 8 9/*ボタンの位置*/ 10#gachaButton{ 11 position: absolute; 12 top :100px; 13 left: 500px; 14}
JavaScriptはこちらです。
JavaScript
1$().ready(function(){ 2 $('button').on('click',changeGacha); 3}); 4 5changeGacha = function(){ 6 var gachaResult = rand(1,100); 7 /*5%で大当たり画像に差し替え*/ 8 if(gachaResult <= 5){ 9 $('#gachaHatena').attr('src', './atariUL.png'); 10 } 11 /*8%で当たり画像に差し替え*/ 12 else if(5 < gachaResult && gachaResult <= 13){ 13 $('#gachaHatena').attr('src', './atariN.png'); 14 } 15 /*残りの割合ではずれ画像に差し替え*/ 16 else{ 17 $('#gachaHatena').attr('src', './suka.png'); 18 } 19}; 20 21 22/*minからmaxまでの間からランダムな値を返す関数*/ 23rand = function(min,max){ 24 return Math.floor(Math.random()*(max - min)+min); 25}; 26 27
試したこと
調べてみるとCSSは後から書いたほうが優先されるとのことですが、異なるidを指定しているのであればどちらも実行されるように思います。
まだプログラミングを学び始めて間もない初心者であるため、初歩的なミスを犯していたり、根本的なところから理解が及んでいないかもしれませんが、よければご教示ください。
回答1件
あなたの回答
tips
プレビュー