ここから本文です

現在プログラミングを勉強中です。 今は、ボタンを押すと画像がランダムで出てく...

tet********さん

2019/1/700:58:15

現在プログラミングを勉強中です。
今は、ボタンを押すと画像がランダムで出てくるプログラムに手を加えようと思っています。

そこで問題がありまして、現在「ガチャ10連」というボタンを押した後に、「ガチャ1連」というボタンを押すと、「ガチャ10連」の時に表示された10枚の画像が消えてくれません。
どうにか、ボタンを押したら毎回他の画像が消えてくれるようにしたいのですが、どなたか解決法がわかるようでしたら教えてください
お願いいたします。

あと、画像を表示する際に、ボタンをクリックするたびに、画像が1枚1枚遅れて表示されるcssを画像に使いたいです。
ですが、うまくいきません。
ボタンをクリックする度に、CSSを適用させるにはどうしたら良いのでしょうか・・・
加えて、このCSSを適用する前は5枚を2列で表示していたのですが、このCSSを適用すると1列10枚になってしまいます
それに10枚順番にやりたいのですが、5枚ずつになってしまいます
この問題についてもわかる方いましたらお願いいたします。

この問題についてのプログラム文を載せます

Gacha.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ガチャSample</title>
<link rel = "stylesheet" href = "CSS/Continuity_animation.css">
<style>
img{vertical-align:bottom;}
</style>
</head>
<body>
<script>
//各レアリティごとの画像ファイル名とレアリティを配列で保持
var gachalist =
[
['image/image1.png','SSR',0],
['image/image2.png','SR',0],
['image/image3.png','SR',0],
['image/image4.png','R',0],
['image/image5.png','R',0],
['image/image6.png','R',0],
['image/image7.png','R',0],
['image/image8.png','R',0],
['image/image9.png','R',0],
['image/image10.png','R',0]
];
function GachaRamdam(n)
{
//ランダムで画像ファイルを取得する
var ramdam = Math.floor(Math.random() * gachalist.length);
var obj = document.getElementById("im"+n);
obj.src = gachalist[ramdam][0];
obj.height = 150;
obj.weight = 150;
}

function Gacha_One()
//ガチャを1回引く関数
{
var i = 0
GachaRamdam(i);
}

function Gacha_Ten()
//ガチャを10回引く関数
{
for(var i = 0; i < 10; i++)
{
GachaRamdam(i);
}
}

</script>

<input type="button" value="ガチャ1連" onclick="Gacha_One()">
<input type="button" value="ガチャ10連" onclick="Gacha_Ten()">

<div>
<img class="item" id="im0"><img class="item" id="im1"><img class="item" id="im2"><img class="item" id="im3"><img class="item" id="im4">
</div>
<div>
<img class="item" id="im5"><img class="item" id="im6"><img class="item" id="im7"><img class="item" id="im8"><img class="item" id="im9">
</div>
</body>
</html>
-----

CSSの方です
CSSのファイル名は「Continuity_animation.css」です

.item {
float: left;
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0);
color: #fff;
list-style: none;
text-align: center;
line-height: 60px;
opacity: 0;
}

.item:nth-child(1) {
-webkit-animation: example 0.5s ease 0.5s 1 forwards;
animation: example 0.5s ease 0.5s 1 forwards;
}

.item:nth-child(2) {
-webkit-animation: example 0.5s ease 1s 1 forwards;
animation: example 0.5s ease 1s 1 forwards;
}

.item:nth-child(3) {
-webkit-animation: example 0.5s ease 1.5s 1 forwards;
animation: example 0.5s ease 1.5s 1 forwards;
}

.item:nth-child(4) {
-webkit-animation: example 0.5s ease 2s 1 forwards;
animation: example 0.5s ease 2s 1 forwards;
}

.item:nth-child(5) {
-webkit-animation: example 0.5s ease 2.5s 1 forwards;
animation: example 0.5s ease 2.5s 1 forwards;
}

.item:nth-child(6) {
-webkit-animation: example 0.5s ease 3s 1 forwards;
animation: example 0.5s ease 3s 1 forwards;
}

.item:nth-child(7) {
-webkit-animation: example 0.5s ease 3.5s 1 forwards;
animation: example 0.5s ease 3.5s 1 forwards;
}

.item:nth-child(8) {
-webkit-animation: example 0.5s ease 4s 1 forwards;
animation: example 0.5s ease 4s 1 forwards;
}

.item:nth-child(9) {
-webkit-animation: example 0.5s ease 4.5s 1 forwards;
animation: example 0.5s ease 4.5s 1 forwards;
}

.item:nth-child(10) {
-webkit-animation: example 0.5s ease 5s 1 forwards;
animation: example 0.5s ease 5s 1 forwards;
}

@-webkit-keyframes example {
100% {
opacity: 1;
}
}
@keyframes example {
100% {
opacity: 1;
}
}

長い文で、本当に申し訳ございませんが、どうかよろしくお願いいたします。

閲覧数:
42
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

glo********さん

2019/1/818:37:24

90%程度うまく行ったかな?
という例です。



◎ Gacha.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ガチャSample</title>
<link rel = "stylesheet" href = "CSS/Continuity_animation.css">
<style>
img{vertical-align:bottom;}
</style>
</head>
<body>
<script>
//各レアリティごとの画像ファイル名とレアリティを配列で保持
var gachalist =
[
    ['image/image1.png','SSR',0],
    ['image/image2.png','SR',0],
    ['image/image3.png','SR',0],
    ['image/image4.png','R',0],
    ['image/image5.png','R',0],
    ['image/image6.png','R',0],
    ['image/image7.png','R',0],
    ['image/image8.png','R',0],
    ['image/image9.png','R',0],
    ['image/image10.png','R',0]
];
function GachaRamdam(n)
{
    //ランダムで画像ファイルを取得する
    var ramdam = Math.floor(Math.random() * gachalist.length);
    var obj = document.getElementById("im"+n);
    obj.className = "dummy";
    obj.src = gachalist[ramdam][0];
    obj.height = 150;
    obj.weight = 150;
    setTimeout(function(){obj.className = "item";},50);
}

function Gacha_One()
//ガチャを1回引く関数
{
    for(var n = 0; n < 10; n++)
    {
        document.getElementById("im"+n).removeAttribute("src");
    }
    var i = 0
    GachaRamdam(i);
}

function Gacha_Ten()
//ガチャを10回引く関数
{
    for(var i = 0; i < 10; i++)
    {
        GachaRamdam(i);
    }
}

</script>

<input type="button" value="ガチャ1連" onclick="Gacha_One()">
<input type="button" value="ガチャ10連" onclick="Gacha_Ten()">

<div>
<img class="dummy" id="im0"><img class="dummy" id="im1"><img class="dummy" id="im2"><img class="dummy" id="im3"><img class="dummy" id="im4">
</div>
<div>
<img class="dummy" id="im5"><img class="dummy" id="im6"><img class="dummy" id="im7"><img class="dummy" id="im8"><img class="dummy" id="im9">
</div>
</body>
</html>



◎ CSS/Continuity_animation.css

.item, .dummy {
/* float: left; */
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0);
color: #fff;
list-style: none;
text-align: center;
line-height: 60px;
opacity: 0;
}

.item:nth-child(1) {
-webkit-animation: example 0.5s ease 0.5s 1 forwards;
animation: example 0.5s ease 0.5s 1 forwards;
}

.item:nth-child(2) {
-webkit-animation: example 0.5s ease 1s 1 forwards;
animation: example 0.5s ease 1s 1 forwards;
}

.item:nth-child(3) {
-webkit-animation: example 0.5s ease 1.5s 1 forwards;
animation: example 0.5s ease 1.5s 1 forwards;
}

.item:nth-child(4) {
-webkit-animation: example 0.5s ease 2s 1 forwards;
animation: example 0.5s ease 2s 1 forwards;
}

.item:nth-child(5) {
-webkit-animation: example 0.5s ease 2.5s 1 forwards;
animation: example 0.5s ease 2.5s 1 forwards;
}

.item:nth-child(6) {
-webkit-animation: example 0.5s ease 3s 1 forwards;
animation: example 0.5s ease 3s 1 forwards;
}

.item:nth-child(7) {
-webkit-animation: example 0.5s ease 3.5s 1 forwards;
animation: example 0.5s ease 3.5s 1 forwards;
}

.item:nth-child(8) {
-webkit-animation: example 0.5s ease 4s 1 forwards;
animation: example 0.5s ease 4s 1 forwards;
}

.item:nth-child(9) {
-webkit-animation: example 0.5s ease 4.5s 1 forwards;
animation: example 0.5s ease 4.5s 1 forwards;
}

.item:nth-child(10) {
-webkit-animation: example 0.5s ease 5s 1 forwards;
animation: example 0.5s ease 5s 1 forwards;
}

@-webkit-keyframes example {
100% {
opacity: 1;
}
}
@keyframes example {
100% {
opacity: 1;
}
}



冒頭で「90%程度うまく行ったかな?」と書きましたが
Google Chrome の場合
上のままでは src 属性を抜いた imgタグ内が
「画像が無いよ!」マークになります。

また imgタグ の src属性 は必須で消してはいけません。
(最初の <img class="item" id="im0"> などは HTML の規則違反。)

ですから本当は
真っ白や透明のpng画像でも用意して

document.getElementById("im"+n).removeAttribute("src");

の部分を

document.getElementById("im"+n).src = "真っ白や透明のpng";

のように変更した方が良いと思います。
(最初の HTML にも src属性 を入れておくべき。)

90%程度うまく行ったかな?
という例です。


 
◎ Gacha.html...

  • 質問者

    tet********さん

    2019/1/822:46:29



    ご回答誠にありがとうございます。

    回答者様のおかげで問題は解決できました!
    本当にありがとうございます!

    src属性は入れないといけないんですね
    申し訳ございません
    勉強不足で申し訳ないのですが、<img src class="item" id="im0">
    src属性はこのように入れればよいのでしょうか?

  • その他の返信(2件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2019/1/9 10:12:39

丁寧に教えて下さって本当にありがとうございます!
回答者様のおかけで問題を無事解決出来ました

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる