質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1371閲覧

ランダム表示画像に文字列をいれる。

javascriptfan

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/08/10 05:59

前提・実現したいこと

javascriptで、ランダムに表示させた画像をクリックしたら横に文字列が表示させる
方法を教えてください。
(初心者です。)

発生している問題・エラーメッセージ

javascriptで、ランダムに画像を表示させることはできました。
できないのが
1 表示されているそれぞれの画像をクリックすること
2 クリックした後、横に文字列を表示させることができません。

現在
ボタン。<画像>

完成形の画面の構成は↓のような感じです。
ボタン。<画像> →クリック→(文字列)

該当のソースコード

<!-- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>test</title> <script> function getImage(){ var arr = ['1.jpg', '2.jpg', '3.jpg']; var obj = document.getElementById("im"); var a = Math.floor(Math.random() * arr.length); obj.src = arr[a];    } </script> </head> <body> <input type="button" value="Push" onclick="getImage()"> <img id="im" alt="image is here"> </body> </html> -->

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/08/10 06:50

<!-- -->はhtmlコメントといってこれに挟まれているコードはブラウザ上には表示されません。 というのはご理解されてますか? もしteratailのマークダウン機能としてコードブロックにしたいのでしたら```で囲ってください。
javascriptfan

2018/08/10 06:58

ご指摘ありがとうございます。気をつけます
guest

回答1

0

ベストアンサー

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#btn').addEventListener('click',function(e){ 4 var arr = ['1.jpg', '2.jpg', '3.jpg']; 5 var a = Math.floor(Math.random() * arr.length); 6 document.querySelector("#im").setAttribute("src",arr[a]); 7 document.querySelector("#im").addEventListener('click',function(e){ 8 document.querySelector("#sp").textContent="(文字列)"; 9 }); 10 }); 11}); 12</script> 13<input type="button" value="Push" id="btn"> 14<img id="im" alt="image is here"> 15<span id="sp"></span>

文字列指定

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#btn').addEventListener('click',function(e){ 4 var arr =[ 5 ['1.jpg', '2.jpg', '3.jpg'], 6 ['1文字列', '2文字列', '3文字列'], 7 ]; 8 var a = Math.floor(Math.random() * arr[0].length); 9 document.querySelector("#im").setAttribute("src",arr[0][a]); 10 document.querySelector("#im").addEventListener('click',function(e){ 11 document.querySelector("#sp").textContent=arr[1][a]; 12 }); 13 }); 14}); 15</script> 16<input type="button" value="Push" id="btn"> 17<img id="im" alt="image is here"> 18<span id="sp"></span>

投稿2018/08/10 06:54

編集2018/08/10 07:28
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

javascriptfan

2018/08/10 07:07

ありがとうございます。 可能であればですが、1.jpgをクリックしたときは(1文字列)。2.jpgをクリックした時は(2文字列)。 3.jpgをクリック時は(3文字列)と、画像ごとにクリックした後に表示されるプログラムは可能でしょうか。 複雑なプログラムだったので、初心者にはかなり難しくできなさそうです。
javascriptfan

2018/08/10 07:31

ありがとうございます。助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問