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()'で呼びだそうと考えたのですが動かない原因はわかりますでしょうか?(コンソールではエラーは出ておりませんでした)

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/09/02 21:50:16
  • 終了:2015/09/09 21:55:03

回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4524ベストアンサー獲得回数18802015/09/02 22:49:36

動きそうな気もしますが、何故か動かないですね。
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 に指定するかです。

他3件のコメントを見る
id: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 にぶら下げても良い
↑の部分は//で、無視されていますが、不要ということでしょうか?

2015/09/09 14:37:35
id:a-kuma3

この btn.appendChild(img);という部分で指定した絵を表示するのでしょうか?

そうです。
btn の子要素に img を指定したタイミングで表示されるはずです。

// document.body.appendChild(img); // body にぶら下げても良い
↑の部分は//で、無視されていますが、不要ということでしょうか?

そうです。
btn.appendChild(img);

document.body.appendChild(img);
のどちらか一方で OK です。

//正解に○をつける
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].id です。

var btn = document.getElementById(buttons[kotaelabel].id);
2015/09/09 15:16:27
id:kajironpu

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

↑の応用で正解したボタンを押すと正解の丸の絵をだしたいのですが、
今まで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;

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません