人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptで、document.getElementByIdで”発音ボタン”の絵を表示させ、そこをクリックしたら発音させようとしています。(1回目は、ボタンをクリックしなくても、すぐ音がなるようにして、さらにボタンをクリックすると何度も発音が聞けるようにしたい)

//発音ボタンを押したら発音させる
var s="<img src='sozai/speaker.png' onclick='hatuon()'>"
document.getElementById("発音ボタン").innerHTML = s;

このようにコードを書きました。いちおう、発音ボタンの絵は表示されるのですが、クリックしても動きません。
後のほうに発音させるプログラムをfunction化して、絵をクリックしたときにそれを呼びだそうと考えました。
ちなみに、このfunction化したところは、ボタンを押さなくても、すぐ発音させたいので
即実行させるために、
hatuon();
function hatuon() {
ここに発音させるコードを記入
}

としてあります。(関数を即呼び出すやり方はこれで正しいですか?)

このhatuon()の関数を、 onclick='hatuon()'で呼びだそうと考えたのですが動かない原因はわかりますでしょうか?(コンソールではエラーは出ておりませんでした)

●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3

動きそうな気もしますが、何故か動かないですね。
id="撥音ボタン" は BUTTON タグの要素だと思いますが、試しに DIV タグにすると質問のコードでも動きます。
HTML のイベントって、子から親に伝搬すると思ってたのですが、BUTTON の内側に IMG がくるとダメな感じです。
# 知らんかった

BUTTON を使うのであれば、以下のようなコードにすれば動きます。

 var s="<img src='sozai/speaker.png'>";
 var btn = document.getElementById("発音ボタン");
 btn.innerHTML = s;
 btn.onclick = hatuon; // IMG じゃなくて BUTTON の onclick に指定する

それか、IMG タグを使わずに、BUTTON の background-image に指定するかです。


kajironpuさんのコメント
ありがとうございます。無事うまくいきました。 あくまで、btnをクリックしたときにfunctionに飛ばすという形にしないとだめなのですね そして、それぞれ、btnには、絵のリンクを、そしてonclick先には関数を入れるのですね トライしたのは検索して見つけたやり方でしたので、問題なくできると思ったのですが、まったく動かず 理由がわからず困っていました。ありがとうございました。

a-kuma3さんのコメント
>> あくまで、btnをクリックしたときにfunctionに飛ばすという形にしないとだめなのですね << こんなふうに、IMG を差し込む先が BUTTON じゃなければきちんと動くんですよね... >|html| <script> var s="<img src='sozai/speaker.png' onclick='hatuon()'>" document.getElementById("sound-button").innerHTML = s; </script> <div id="sound-button"></div> ||< BUTTON だからダメっぽくて、IE と FireFox がダメで、Chrome なら BUTTON でも動きました。 それが何故なのかは ぼくも分からんです <tt>X-|</tt>

a-kuma3さんのコメント
質問の補足を受けて。 >> >|| var s="<img src="./sozai/seikai/gif">; document.getElementById("buttons[kotaelabel]").innerHTML = s; ||< このようにしてみたのですが、うまく動いてくれません。 << 「うまく動いてくれない」というのは、ボタンが大きくなっちゃうか、ボタンのサイズを指定してるから画像が見えないか、のどちらかですよね。 あるタグの内側にくるタグは、そのタグの内側に表示されるのが基本です。 自由な位置に表示するには、position というスタイルを absolute にする必要があります。 例えば、こんな感じ。innerHTML でも書けますが、設定するものが多いので DOM での例です。 >|javascript| var btn = document.getElementById(buttons[kotaelabel]); var img = document.createElement("IMG"); img.src = "./sozai/seikai/gif"; img.style.position = "absolute"; img.style.top = (btn.offsetTop - 30); // 高さ位置を調整 img.style.left = (btn.offsetLeft - 30); // 左右の位置を調整 btn.appendChild(img); // document.body.appendChild(img); // body にぶら下げても良い ||< 新規に作った「<tt>○</tt>」の IMG は、位置を指定しているのでボタンの子要素じゃなくても構いません。

kajironpuさんのコメント
ありがとうございます。なるほど位置を指定するやり方なんですね! もう少し教えて下さい。 ↓のようにしてみましたが、まだ表示されません。 正解ボタンに色をつけて、背景の色も変えています。そこに上から絵を重ねたいのですが //正解に○をつける var buttons = document.getElementsByTagName("button"); buttons[kotaelabel].style.backgroundColor = "#FFBEDA";//ボタンの背景 buttons[kotaelabel].style.color = "#FF0000";//文字の色 var btn = document.getElementById(buttons[kotaelabel]); var img = document.createElement("IMG"); img.src = "sozai/seikai.gif"; img.style.position = "absolute"; img.style.top = (btn.offsetTop - 30); // 高さ位置を調整 img.style.left = (btn.offsetLeft - 30); // 左右の位置を調整 btn.appendChild(img); // document.body.appendChild(img); // body にぶら下げても良い この btn.appendChild(img);という部分で指定した絵を表示するのでしょうか? // document.body.appendChild(img); // body にぶら下げても良い ↑の部分は//で、無視されていますが、不要ということでしょうか?

a-kuma3さんのコメント
>> この btn.appendChild(img);という部分で指定した絵を表示するのでしょうか? << そうです。 btn の子要素に img を指定したタイミングで表示されるはずです。 >> // document.body.appendChild(img); // body にぶら下げても良い ↑の部分は//で、無視されていますが、不要ということでしょうか? << そうです。 btn.appendChild(img); か document.body.appendChild(img); のどちらか一方で OK です。 >|javascript| //正解に○をつける var buttons = document.getElementsByTagName("button"); buttons[kotaelabel].style.backgroundColor = "#FFBEDA";//ボタンの背景 buttons[kotaelabel].style.color = "#FF0000";//文字の色 var btn = document.getElementById(buttons[kotaelabel]); ||< ここの最後が間違っていますね。 getElememtById に指定するのは ID なので、buttons[kotaelabel].<span style="color:red;">id</span> です。 >|javascript| var btn = document.getElementById(buttons[kotaelabel].id); ||<

質問者から

またまた疑問点が有ります。

↑の応用で正解したボタンを押すと正解の丸の絵をだしたいのですが、
今までbackgroundで表示していたため、ボタンのサイズの内側のサイズしか表示できていませんでした。



//正解に○をつける
var buttons = document.getElementsByTagName("button");
buttons[kotaelabel].style.backgroundColor = "#FFBEDA";//ボタンの背景
buttons[kotaelabel].style.color = "#FF0000";//文字の色
buttons[kotaelabel].style.background = "url(sozai/seikai.gif) #FFBEDA center/150px no-repeat";



そこで、ボタン全体を大きく囲むような大きいサイズの正解の丸を出したいと考えました。
(ボタンのbackgroundではなく、直接正解のボタンの上に大きな丸を出したい)

var s=""
document.getElementById("buttons").innerHTML = s;
↑こちらのやり方と同じようにしたら表示できるのでしょうか?(あらかじめ表示させる正解の丸の絵は、文字に重なっても見えるように透明化しておく)

正解のボタンはbuttons[kotaelabel]になっているため

var s=""
document.getElementById("buttons[kotaelabel]").innerHTML = s;

このようにしてみたのですが、うまく動いてくれません。
ご教授いただけないでしょうか。


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ