Go to Qiita Advent Calendar 2024 Top
LoginSignup
blue-phoenix
@blue-phoenix

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

javascriptにおける画像ランダム表示について

Q&A

Closed

HTMLJavaScript

javascriptでちょっとしたアプリを作っている者です。
ボタンを押してランダムに画像を表示させたいのですが、よく分かりません。
スクリーンショット 2024-09-16 141727.png

html,JSで作ったもので、数字の代わりに画像を表示させたいです。
ですが、JSの部分でどうやって画像にすれば良いでしょうか？

html

<main>
<section>
    <h1>ランダム数字</h1>
    <p id = "result">？</p>
</section>
<button id = "btn">ボタン</button>
</main> 
<script src = "omikuji.js"></script>

JS

'use strict';
{
const btn = document.getElementById('btn');
const result = document.getElementById('result');
btn.addEventListener('click', () => {
const results = ['1', '2', '3'];
const n = Math.floor(Math.random() * results.length); //
result.textContent = results[n];
});
}

記述はランダム配列で今は１～３としています。
ここをresultsから画像にするべくimgを入力してもできません。
元から画像の切り替え自体が分かっていないのでお手上げ状態です。
配列内に入れるにはどうすれば良いか御教授お願いします。

0

3Answer

Comments

  1. @blue-phoenix

    Questioner

    これはボタンを押したら画像が出るというコードですか？
    このsetAttributsとか初めて見るんですけど、ボタンとどうやってつなげるんですか？

  2. @blue32a

    解決するイメージが沸かないのであれば、問題を分解して考えましょう。
    「ボタンを押してランダムに画像を表示させたい」というのを分解していきます。

    • ボタンを押すと何かを処理する
    • 画像をjavascriptで表示する
    • ランダムな要素を作る
    • ...

    「ボタンを押すと何かを処理する」や「ランダムな要素を作る」はすでに実現されているようですね。
    私が示したコードは「画像をjavascriptで表示する」の一例です。
    これらを組み合わせることで実現するイメージができそうでしょうか？
    まだ難しいのであれば「何ができればゴールに近づけそうか」を考えてみましょう。

  3. @blue-phoenix

    Questioner

    もう少しでなんとかやれそうです・・・がんばってみます。

midoribi
@midoribi

直接的な回答ではありませんが、画像パスが格納されている文字列から画像を表示する処理を実装できますか？

const imagePath = "path/to/img.jpg"

// imagePathの画像をブラウザ上に表示する処理
1Like

Comments

  1. @blue-phoenix

    Questioner

    画像の記載そのものはできます。でも、配列内に入れる方法が分からなくて・・・。
    ええっと、const変数から画像を取り出して。
    例えば　const results = ["img1", "img2","img3"]; とすれば良いですか？
    できなかったです(；ω；)
    スクリーンショット 2024-09-16 190630.png

  2. @midoribi

    画像の記載そのものはできます。

    画像パスが格納されている文字列から画像を表示する処理は実装できたと受け取りました。

    あとは以下のような感じで実装すればちょちょいのちょいかと。

    'use strict';
{
const btn = document.getElementById('btn');
const results = ["path/to/img1.jpg", "path/to/img2.jpg", "path/to/img3.jpg"]; // 変更点1
const result = document.getElementById('result');
btn.addEventListener('click', () => {
const n = Math.floor(Math.random() * results.length); //
const imagePath = results[n];
// imagePathの画像をブラウザ上に表示する処理 // 変更点2
});
}

    でも、配列内に入れる方法が分からなくて・・・。
    ええっと、const変数から画像を取り出して。

    このあたりはよくわからず。
    なんのために、どの配列に、どの値を入れようとしている？
    const変数とはどの変数のことを指してる？変数名で教えて。
    「画像を取り出して」というのは具体的に何を取り出してる？画像パス？imgタグオブジェクト？

  3. @blue-phoenix

    Questioner

    'use strict';
{
const btn = document.getElementById('btn');
const result = document.getElementById('result');
btn.addEventListener('click', () => {
const results = ["path/to/img3.png", "path/to/img4.png", "path/to/img5.png"];
const n = Math.floor(Math.random() * results.length);
const imagePath = results[n];
});
}

    できないです、何も変わりません・・・。
    resultsにあるpath/toってどういう意味ですか？

  4. @midoribi

    あなたが作った「画像パスが格納されている文字列から画像を表示する処理は実装」を　const imagePath = results[n]; の次の行に追加してください。

    私の書いたコードはあくまでサンプルであり、動作を保証するものではありません。

    resultsにあるpath/toってどういう意味ですか？

    私はあなたがどこから画像を持ってこようとしてるか知りません。
    path/toは適当に書いただけで意味はなく、適宜あなたのほうで適切なファイルパスへ書き換えてください。

  5. @blue-phoenix

    Questioner

    スクリーンショット 2024-09-17 141225.png

    で、できないです・・・うおおお、今回は先に見せるしかないぃぃィ。
    １つのファイルの中にこうやって入れてます。
    この場合はどうやって記述すれば良いですか？

  6. @midoribi

    直接的な回答ではありませんが、画像パスが格納されている文字列から画像を表示する処理を実装できますか？

    画像の記載そのものはできます。

    上記の処理は実装できたんですよね？
    その際に使った imagePath の値を配列に入れるだけですよ。

    「できない」と書いていますが、それでは全く伝わりません。具体的かつ客観的に正しいと言える根拠を添えて、なにができないのかを書いてください。また、どこまではできたのかも合わせて書くとよりGoodです。

  7. @blue-phoenix

    Questioner

    html

    <section>
    <h1>ランダム数字</h1>
    <p id = "imagePath">？</p>
</section>

    JS

    const btn = document.getElementById('btn');
const result = document.getElementById('result');
btn.addEventListener('click', () => {
const results = ["img3.png", "img4.png", "img5.png"];
const n = Math.floor(Math.random() * results.length);
const imagePath = results[n];
});

    もう一度きちんと提示し直します、これらはどこかおかしいですか？
    resultsよりimagePathをhtmlのidとして代入させたんですけど。
    それともresultsをidに代入するのですか？
    htmlのpタグidはどこへつなげれば良いかすらよく分かりません。

  8. @blue-phoenix

    Questioner

    もっと具体的に書かなくてはァ。
    「ｐタグに書いた？の代わりに画像を載せる
    　→さらにbtn.addEventListenerでクリックする度に表示
    　→document.getElementByIdを通して３つの配列作る
    　→それをresultsとして変数に変えて・・・」
    ここから先が分かりません('；ω；')

  9. @midoribi

    私の能力不足で回答が難しいので、他の方の回答をもとに頑張って答えにたどり着いてください！

  10. @blue-phoenix

    Questioner

    後もう少しなので頑張ります・・・必ず成功させたいです。

blue-phoenix
@blue-phoenix

にらめっこ.png

ブロログガゴモォオホホブエェ、できたあああああああああああああああああああああああああああああああああああああああああああああああああああああ！！！！
やったぞおおおおおおおおおおおおおおおおおおおおおおおおあおおお！！！

0Like

Comments

  1. @blue-phoenix

    Questioner

    もう無理なんじゃないかって一瞬思ってしまいました！
    勝機は・・・＃くっついたbox、この書き方初めて見たんですけど。
    これが決め手コードじゃああああああああああああああああああああ！！！！

    html

    <body>
<div class="container">
<img id="box" src=""></img>
</div>
<button id="btn"><img class = "img22" src = "img22.png"></button>
<p>笑ったら人生負け組</p>
<script src = "omikuji.js"></script>   
</body>
<style>
#box{
display: block;
width: 300px;
height: 300px;
}
</style>

    JS

    'use strict';
{
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
const path =["./img1.png","./img2.png","./img3.png"];
const number = Math.floor(Math.random() * 3);
document.getElementById("box").setAttribute("src",path[number]);
});
}

    画像の切り替えだけでこんなに手間取るなんてみくびってました。
    とりあえず疲れたので今日はこれでおわりにします。
    ありがとうございましたあああああああ、神様あああああああああ！！！

  2. @blue-phoenix

    Questioner

    な、なるほど・・・JavaScriptもけっこう奥が深いんですね。
    おかげさまでもっと何かを作ってみたくなりました！
    感謝しています！！

Your answer might help someone💌

LoginSign Up