- ベストアンサー
クリックでボタンの画像を変更するjavascriptsで
通常A画像のボタンが押された場合、B画像に変更すると言う動作を行いたいのですが、 document.f1.elements['b1'].src = "A.jpg"; この部分でエラーがでます。 input type="image"のsrcを指定するにはどうしたら良いでしょうか。 --------------------- <html> <script language="javascript"> <!-- function ImageChange(){ if(document.f1.elements['b1value'].value == 0){ document.f1.elements['b1'].src = "A.jpg"; document.f1.elements['b1value'].value = 1; }else{ document.f1.elements['b1'].src = "B.gif"; document.f1.elements['b1value'].value = 0; } } //--> </script> <body> <form name="f1"> <input type="image" name="b1" src="A.gif" onclick="ImageChange()" > <input type="hidden" name="b1value" value="0"> </form> </body> </html>
- ree111
- お礼率40% (10/25)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
調べてみたところ、type="image"がform.elementsに入らないですね。 http://chaichan.web.infoseek.co.jp/qa6000/qa6413.htm これは知りませんでした。 elementsを使うかgetElementByIdやgetElementsByNameなどを使うかは好みで良いと思います。 function ImageChange(ipt){ if(ipt.form.elements['b1value'].value == 0){ ipt.src = "A.jpg"; ipt.form.elements['b1value'].value = 1; }else{ ipt.src = "B.gif"; ipt.form.elements['b1value'].value = 0; } } <input type="image" name="b1" src="A.gif" onclick="ImageChange(this);return false;" > 私はfunctionの中で分岐させる必要がないときは、onclick="return false;"と書いていますので。 画像の変更なら<img>の方が良いと思いますけどね。
その他の回答 (1)
- auty
- ベストアンサー率58% (284/486)
以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <script language="javascript"> <!-- function ImageChange(){ if(document.getElementById('b1value').value == 1){ document.getElementById('b1').src = "A.gif"; document.getElementById('b1value').value = 1; }else{ document.getElementById('b1').src = "B.gif"; document.getElementById('b1value').value = 0; } return false; } //--> </script> <body> <form name="f1"> <input type="image" id="b1" name="b1" src="A.gif" onclick="return ImageChange()"> <input type="hidden" id="b1value" name="b1value" value="0"> </form> </body> </html>
関連するQ&A
- input type="image"でマウスクリック画像変更がうまくいかない
input type="image" で表示した画像を変更したいのですがうまくいきません。 <form name="form1" action="" method="POST"> <input type="image" src="A.gif" name="A" onclick="ChangeImage();"> </form> <script language="javascript"> function ChangeImage(){ document.form1.A.src="B.gif" } </script> というコードをなんですが、ボタンをクリックしても何も起こりません。 アンカータグを使わずにinputで行いたいのですがどなたかご存じないでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
- ラジオボタン
<html> <head> <title></title> <script type="text/javascript"> function check() { var s=0; if(document.forms["f2"].elements["stay"].checked) { var radios = document.forms["f2"].elements["aa"]; if(document.forms["f2"].elements["aa"].checked) s += 1800; if(document.forms["f2"].elements["aa"].checked) s += 2800; if(document.forms["f2"].elements["aa"].checked) s += 3800; if(document.forms["f2"].elements["aa"].checked) s += 2000; document.forms["f2"].elements["total"].value = s ; } } </script> </head> <body> <form name="f2" action="#"> <h4>Q1.テーマパークに入りますか？</h4> <p> <input type="checkbox" name="stay" value="">入場する </p> <h4>Q2.年齢は？</h4> <p> <input type="radio" name="aa" value="" checked>6歳未満 <input type="radio" name="aa">6歳以上18歳未満 <input type="radio" name="aa">18歳以上60歳未満 <input type="radio" name="aa">60歳以上 </p> <h4>入場料金は次の通りです。</h4> <p> <input type="button" value="計算" onclick="check();"> <input type="text" name="total" value="" size="18">円です。 </p> </form> </body> </html> これでやると何を選択しても0円になるんですけど、 どうすればいいですか？
- ベストアンサー
- JavaScript
- レイヤーにある画像を変更したいです。
ボタンを押したらレイヤー内の画像を変更したいのですが 可能でしょうか？ レイヤーでなければできるのですが・・ <html> <head> <SCRIPT language=JavaScript> <!-- function a(fishimg){ document.getElementById('layer1').images[0].src = fishimg; } //!---> </SCRIPT> </head> <body> <form name="form1"> <input type="button" onClick="a('fish2.gif')" value="レイヤーの画像を変えます。"> </form> <DIV id="layer1"> <IMG src="fish.gif"> </DIV> </body></html>
- ベストアンサー
- JavaScript
- 複数のラジオボタンのチェック
複数のラジオボタンが全て選択されているかどうかのチェックのJavaScriptをすっきりした形で書くのは、どうしたらいいでしょうか？ 下記のようですと、ダラダラと記述するようになってしまいます。 どなたかご教授ください。 --------------------------------------- <script type="text/javascript"> function insert_onClick() { j=0; for (i=0 ;i < document.F1.a11.length ; i++){ if (document.F1.a11[i].checked) { j=1; } } } </script> <form action="check.php" name="F1" onsubmit="return insert_onClick()"> 各valueは0～4まであります <input type="radio" name="a11" value="0"> <input type="radio" name="a12" value="0"> <input type="radio" name="a21" value="0"> <input type="radio" name="a22" value="0"> <input type="radio" name="b11" value="0"> <input type="radio" name="b12" value="0"> <input type="radio" name="b21" value="0"> <input type="radio" name="b22" value="0"> ---------------------------------------
- ベストアンサー
- JavaScript
- クリックするとボタンの中の文字が変わるようにしたいんですが一応コードは出来たんですが・・うまくうごかなくて困ってます。
java スクリプトのONCLICKについて質問があります。 ONCLICKのあとに何個もオプションはつけられないのでしょうか？ <INPUT TYPE="button" VALUE=" " ONCLICK="form1.Q8.value += '1';" style="font-size:40pt"><br> にボタンをクリックするとボタンの中に「○」を表示するようにしたいんですが、うまくいきません・・・ 一応こう感じにつくってみたんですが・・・ <html> <head> <title></title> </head> <body> <script type="text/javascript"> function change_label(){ document.form1.label1.value = " ○ "; } </script> <form name="form1"> <input type="hidden" name="Q8" value=""><br> <input type="button" name="label1" value="クリックしてね" onclick="form1.Q8.value += '1';change_label();"> <input type="submit" name="Q9b" value="次へ" style="font-size:25pt"> </form> </body> </html> もしよろしければアドバイスいただけませんでしょうか・・・・
- 締切済み
- JavaScript
- ボタンを押すたびに画像を切り替えるには？
まずソースを載せます↓ <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=shift-jis"> <title>ボタンを押すたびに画像を表示します</title> <body bgcolor="#FFFFFF"> <script type="text/javascript"> function func1(str) { document.write('<img src="c:/MyImage/dog1.jpg" width="104" height="91" />'); } function func2(str) { document.write('<img src="c:/MyImage/dog2.jpg" width="104" height="91" />'); } function func3(str) { document.write('<img src="c:/MyImage/dog3.jpg" width="104" height="91" />'); } function func4(str) { document.write('<img src="c:/MyImage/dog4.jpg" width="104" height="91" />'); } </script> </head> <body bgcolor="#FFFFFF"> <form id="myForm" name="myForm"><p> <input type="button" value="ボタン1" name="button1"onclick="func1('dog1.jpg');"> <input type="button" value="ボタン2" name="button2"onclick="func2('dog2.jpg');"> <input type="button" value="ボタン3" name="button3"onclick="func3('dog3.jpg');"> <input type="button" value="ボタン4" name="button4"onclick="func4('dog4.jpg');"> </p></form> </body> </html> 今回の質問内容はボタンを押すたびに画像を表示するjavascriptプログラムです 画像はCドライブ直下のMyImageフォルダにdog1.jpg,,dog2.jpg,dog3.jpg, dog4.jpgを入れています なんで動かないのがわからないです 回答できたらよろしくお願いします
- ベストアンサー
- JavaScript
- JavaScriptのラジオボタンについてご質問させていただきます。
JavaScriptのラジオボタンについてご質問させていただきます。 ラジオボタンに選択したメニューの合計カロリーを表示するというシステムを作っているのですが、私は初心者なため、行き詰まってしまいました。。 簡単なシステムで、ハンバーガー、サイドメニュー、ドリンクと３つの項目にそれぞれ２つ選択肢があって、最後に計算ボタンを押すと選んだメニューの合計カロリーが出るというものです。 私が作ったコードが以下になります。 <html> <head> <title>マックでカロリー</title> <script language="javascript"> a =document.formA.hamburger.value; b =document.formB.sidemenu.value; c =document.formC.drink.value; function calccalorie(){ calorie = "a + b + c"; return eval(calorie); } function writecalorie(){ document.write("あなたのマックでの摂取カロリーは" + calccalorie() + "kcalです！<br /><br />"); document.write("ちなみに、一日に必要なエネルギー量の目安は、20代男性で2650kcal、20代女性で2050kcalです。"); } </script> </head> <body> <fieldset> <p> <h2>ハンバーガー</h2><br /> <img src="hamburger.jpg" /> <img src="bigmac.jpg" /><br /> <form name="formA"> <input type="radio" name="hamburger" value="274" /> ハンバーガー <input type="radio" name="hamburger" value="555" /> ビッグマック </form> </p> </fieldset> <fieldset> <p> <h2>サイドメニュー</h2> <img src="frenchfries.jpg" /> <img src="shakashakachicken.jpg" /><br /> <form name="formB"> <input type="radio" name="sidemenu" value="454" /> マックフライポテト（M） <input type="radio" name="sidemenu" value="187" /> シャカシャカチキン </form> </p> </fieldset> <fieldset> <p> <h2>ドリンク</h2> <img src="cocacola.jpg" /> <img src="mcshake.jpg" /><br /> <form name="formC"> <input type="radio" name="drink" value="140" /> コカコーラ（M） <input type="radio" name="drink" value="321" /> マックシェイクバニラ（M） </form> </p> </fieldset> <form> <input type="button" name="btn1" value="何カロリー？" onClick="writecalorie()" /> </form> </body> </html> JavaScriptを勉強し始めて1週間ほどなので、すごく見当違いなことをしているかもわかりません＾＾； 何かアドバイス（参考ホームページでも）いただければ幸いです。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 小数の足し算
Javascriptで <SCRIPT language="JavaScript"><!-- function wa() { a = eval( document.myFORM.a.value ); b = eval( document.myFORM.b.value ); s = a + b; document.myFORM.kotae.value="答え " + s; } //--></SCRIPT> </HEAD> <BODY> <FORM name="myFORM"> A =<INPUT type="text" name="a" size="3">B =<INPUT type="text" name="b" size="3"><BR> <INPUT type="text" name="kotae"><INPUT type="button" value="＝" onclick="wa()"> </FORM> </BODY> としたとき A=0.1 B=0.05とすると 答え 0.15000000000000002となるのはなぜですか？
- ベストアンサー
- JavaScript
- 動画の入れ替えについて
お世話になります 以下のような画像入れ替えを使ってフラッシュなどの動画入れ替えは可能なのでしょうか 宜しくお願いします <SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript非対応ユーザーの為に function irekaeA(){ if (document.form1.pars[0].checked){ document.parsga.src="3-1.jpg" }else{ if (document.form1.pars[1].checked){ document.parsga.src="3-2.jpg" }else{ if (document.form1.pars[2].checked){ document.parsga.src="3-3.jpg" }else{ if (document.form1.pars[3].checked){ document.parsga.src="3-4.jpg" }else{ if (document.form1.pars[4].checked){ document.parsga.src="3-5.jpg" }else{ document.parsga.src="3-6.jpg" } } } } } } // --> </SCRIPT> <FORM NAME="form1"> <INPUT TYPE="radio" NAME="pars" VALUE="pars1"onclick="irekaeA()" CHECKED>sample1 <INPUT TYPE="radio" NAME="pars" VALUE="pars2"onclick="irekaeA()">sample2 <INPUT TYPE="radio" NAME="pars" VALUE="pars3"onclick="irekaeA()">sample3 <INPUT TYPE="radio" NAME="pars" VALUE="pars4"onclick="irekaeA()">sample4 <INPUT TYPE="radio" NAME="pars" VALUE="pars5"onclick="irekaeA()">sample5 <INPUT TYPE="radio" NAME="pars" VALUE="pars6"onclick="irekaeA()">sample6 </FORM><BR> <IMG SRC="3-1.jpg" NAME="parsga" width="550" height="405">
- 締切済み
- JavaScript
- 文書オブジェクトについて？？？
フォームボタンの画像を入れ替えたいのですが、 正しく動きません。何が悪いのでしょうか？ 文字コードはEUC-JPを使っていますが、関係あるのでしょうか？ <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <TITLE>Javascript</TITLE> <script type="text/javascript"> <!-- function btn_click(dat) { if(teban == 1){ document.forms['btn'].elements['btn1'].src = "./img/b.gif"; }else{ document.forms['btn'].elements['btn2'].src = "./img/d.gif"; } } --> </script> </HEAD> <BODY> フォームのボタンを使ってクリックすると画像が変わる ようにしたい <form name="btn"> <input name="btn1" type="image" src="./img/a.gif" onClick="play_start(1); return false;"> <input name="btn2" type="image" src="./img/c.gif" onClick="play_start(2); return false;"> </form> </BODY> </HTML>
- 締切済み
- JavaScript
お礼
回答ありがとうございます。 getElementByIdとかgetElementsByName等を使わないと 指定できないんですね・・・。 参考にさせて頂きます。ありがとうございました。