イラストをクリックしたとき、ボタンに応じた文章と画像を、同時にそれぞれ決まった場所に表示したいです。
表示する場所の設定と、文章のほうはなんとかできました。
ですが、画像の表示(入れ替え)がうまくいきません。
色々調べてみたのですが、方法はいろいろあったものの恥ずかしながら理解できませんでした。
下に該当する部分のコードを書きます。
どうか、アドバイスよろしくお願いします。版権を利用している部分は伏せます。
setumei は文章を表示する部分 です。
setumei2 は画像を表示させる部分 にしたいです。
syoukai.png を gpikumin3.pngに画像を入れかえる部分がわかりません。
課題用であり、HP制作用のものではないです。
function button1(){
var div = document.getElementById('setumei');
div.innerHTML = "簡易説明";
div.style.background = "#ffffff";
div.style.border = "1px solid #000000";
var div = document.getElementById('setumei2'); ←わからない部分
dav.src = "gpikumin3.png";
div.style.background = "#ffffff";
div.style.border = "1px solid #000000";
<input type="image" onclick="button1()" src="mimin11.png" height="300" width="300"/>
↑クリックで文章と画像を表示させるイラスト型のボタン
<div id="setumei">
上記の1、2、3のイラストを押すと、簡易説明がここに表示されます。
</div>
<div id="setumei2"><img src="syoukai.png">
↑上が文章、下が画像の表示場所です。
No.1ベストアンサー
- 回答日時:
> dav.src = "gpikumin3.png";
変数 dav とはなんでしょうか?
おそらくは<div>の子要素の<img>を指すと思いますが、
それならば変数 div とは別に用意しなければいけません。
var dav = div.firstChild;
または
var dav = div.querySelector('img');
または
var dav = document.querySelector('#setumei2 img');
あたりでいかがでしょう
回答ありがとうございます。
davの使い方がよくわかっていなかったです、教えていただき助かりました。
指摘された部分と入れかえたところ、画像が表示されました。
3つともプリントで見たことないものばかりで、参考書を買うべきですね。
勉強します、本当にありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アップロードファイルの種類に...
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
オンマウスで画像表示+表示し...
-
一定時間で入れ替わるバナー画...
-
クリックでクリッカブルマップ...
-
時間差で画像を動作させたいjav...
-
全部のサイコロをjavascriptで...
-
IE6でmax-width:100px; max-hei...
-
clear機能を失わずにファイルア...
-
Javascript初心者|jQueryの.va...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
HTMLで条件分岐はできますか?
-
HTMLですCSSです 画像のように...
-
Slick.jsのオプションrtlについて
-
スタイルシートで画面を上下に...
-
大分類・中分類・小分類
-
textareaに画像を表示したい
-
javascriptテキストBOX色を元に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Colorboxがうまく設置できません
-
デフォルト非表示にしたい。【t...
-
「画像クリックで音声再生」を ...
-
Javascript初心者|jQueryの.va...
-
jQueryで同じクラス名のものを...
-
複数bxsliderをタブで切り替え...
-
画像の表示位置
-
embed要素のsrc属性の値を変更...
-
JQueryでオープニングアニメー...
-
jQueryでのドラッグアンドドロ...
-
全部のサイコロをjavascriptで...
-
JavaScriptでクレイアニメ。ち...
-
bxsliderで最初に縦に複数表示...
-
アップロードファイルの種類に...
-
clear機能を失わずにファイルア...
-
JavaScriptでの画像切り替えを...
-
マウスカーソルに合わせて画像...
-
交互に入れ替わる画像を複数配置
-
サイトに横スクロールのスライ...
-
サムネイルにカーソルを合わせ...
おすすめ情報