HTMLボタンで背景色が変わらない問題について
- HTMLのボタンを押しても背景色が変わらない問題について質問です。
- ボタンのvalue属性をプラスして切り替える方法を試していますが、うまくいきません。
- ボタンのvalue属性を自由に増やしても大丈夫なのか疑問です。
- ベストアンサー
HTMLのボタンについて質問です。
現在、ボタンを押したら背景色が変わるプログラムを作成中ですが、うまく切り替わりません。自分としては、value=1をあらかじめ設定しておき、そこで押される度に関数内で、valueの値をプラスしていき、if文で切り替えられるのかなと考えました。 どなたかわかる方おりましたら、回答ください。 またbuttonのvalueなど勝手に増やしても大丈夫なのでしょうか？ それとも増やせないのでしょうか？ <html> <head> <title>element.childNodes - エレメントの子ノードリストを取得</title> </head> <body> <p id="hoge">OASIS</p> <script type="text/javascript"> function change(){ var c=document.getElementById("submit").value; if(c%2==0){ document.body.bgColor="red"; } else{ document.body.bgColor="black"; } c++; //document.body.bgColor="red"; } </script> <input type="button" id="submit" value="1" onclick="change()"> </body> </html>
- 34ttta
- お礼率17% (42/246)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
c++ した値をvalueに戻していないかではないでしょうか？ c++ した後に、 document.getElementById("submit").value = c; のような感じで増やした値を戻してあげる必要があるかと思います。
その他の回答 (1)
scriptで、かきたいのかな？・・・・ CSSで十分できるとおもいますが？・・・ a:active{background-color:red;}
関連するQ&A
- エラーがわかりません。
下記のHTMLの記述ですが、HTML内のvalueがうまく引き渡されません。 どなたかわかる方がおりましたら、教えてください。 <body> <p id="hoge">OASIS</p> <script type="text/javascript"> function change(){ var c=document.getElementById('submit').value; console.log(c); //document.body.bgColor="red"; } </script> <button onClick="change()" id="submit" value="1">Change</button> </body> </html>
- 締切済み
- HTML
- ボタンを押したらテキストボックスの文字色をチェンジ
ボタンをクリックしたらテキストボックスに入っている文字色を黒から赤に変えたいんですがどのようにしたらいいでしょうか？ 一応、自分なりに作ってみたものです。エラーがでます。 保存ファイルの拡張子は「ｈｔｍｌ」です。 ------------------------------------------------------- <html> <head> <script language="javascript"> function change(){ document.form1.text1.fgcolor="red"; } </script> </head> <body> <input type="text" value="文字色" name="text1"> <input type="button" value="押す" onClick="change()"> </body> </html> ----------------------------------------------------------
- 締切済み
- JavaScript
- ボタンに書かれている文字の入れ替え
２つのボタンのどちらを押しても、ボタンに書かれているアルファベットが入れ替わるようにしたいのですが、うまくいきません。 alert(obj1)、alert(obj2)などとして、A,Bともに読み込まれているようなのですが、alert(tmp)の時はundefinedがでます。 どこが間違っているのかよろしければ教えてください。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>勉強中</title> </head> <body> <script> function change_alphabet() { var tmp; var obj1 = document.getElementById("button_1").value; var obj2 = document.getElementById("button_2").value; // alert(obj1); // alert(obj2); tmp = obj1.innerHTML; // alert(tmp); obj1.innerHTML = obj2.innerHTML; obj2.innerHTML = tmp; // alert(obj2); } </script> < input type = "button" id = "button_1" value = "A" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > < input type = "button" id = "button_2" value = "B" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > <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
- フォームで条件によってボタンの処理を変える
フォームでパスワードを入力してもらい、確認用にもう一度入力した際、 誤入力があればアラート、正しく同じ値が入力されればsubmitにしたいと思っており、下記のようなコードを書きましたが、同じ値を入力した際にIEでエラーがでてしまいます（FirefoxやSafariでは動きます）。 当方Javascriptの知識に乏しく、どなたか助けていただけませんでしょうか？宜しくお願いいたします。 <html> <script language="JavaScript"> <!-- function passCheck(){ pass1 = document.free.PASSWORD.value; pass2 = document.free.PASSWORD2.value; if(pass1!==pass2) {alert("入力された確認用パスワードが違います");} else if(pass1==pass2) {document.free.submit.type="submit";} } //--> </script> <body> <form method="POST" action="submit.cgi" name="free"> <p> <input type="password" size="20" name="新パスワード" id="PASSWORD"><br> <input type="password" size="20" name="新パスワード（確認）" id="PASSWORD2"> </p> 確認のため、上記と同じパスワードをご記入ください。 <p><input type="button" name="submit" value="確認する" onclick="passCheck()"/></p> </form> </body> </html>
- ベストアンサー
- JavaScript
- HTMLでテキスト入力し表示させる
HTMLでテキストボックスに文字を入力し、表示させたいのですがうまくできません。 見た目はできているようなのですが、文字が表示されない状態です。 コードを記載しますので、お手数をお掛けしますがご教授頂けますでしょうか。 <html> <head> <script> function add(){ document.getElementById("target").innerText = document.getElementById("name").value; target = document.getElementById("output"); document.write(target); } </script> </head> <body> <p>名前を入力してください</p> <input id="name" name="name" type="text" size="30" onkeydown="update_field();"> <br> <input type="button" onclick="add()" value="実行"> <form action="index.html" method="post"> <br> <input type="submit" name="exit" value="戻る"> </form> </body> </html>
- 締切済み
- JavaScript
- ドキュメントを自ウィンドウに書き出したい
<html> <head> <script language="JavaScript"> <!-- function doc() { document.write("JavaScript"); } //--> </script> </head> <body bgcolor="#ffffff"> <form name="form1"> <input type="button" value="ボタン" onClick="doc()"> </form> </body> </html> 上のプログラムの場合ボタンを押すとボタンが消えJavaScriptと書き出されてしまうのですが、ボタンの下に書き出すにはどうしたらよいのでしょうか？結果として以下のように表示させたいのですがどうしたらよいのでしょうか？ <html> <head> </head> <body bgcolor="#ffffff"> <form name="form1"> <input type="button" value="ボタン"> <p>JavaScript</p> </form> </body> </html> これらのプログラムは自作のものです。
- ベストアンサー
- 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
- 何が違うのでしょうか？
JavaScript の勉強を始めたんですが。何が違うのでしょうか？ <html> <head> <title>背景の色を変える</title> <script languag="JavaScript"> function BGColor(col){ document.baColor=col; } </script> </head> <body> 背景の色を選んでください<br> <from name="F1"> <input type="button" value="赤にする" ocClick="BGClor('red')"> <input type="button" value="緑にする" ocClick="BGClor('green')"> <input type="button" value="青にする" ocClick="BGClor('blue')"> <input type="button" value="白にする" ocClick="BGClor('white')"> <br> <select name="S1" onChange="BGColor(document.F1.S1.value);"> <option value="red">赤にする <option value="green">緑にする <option value="blue">青にする <option value="white">白にする </select> </from> </body> </html>
- ベストアンサー
- JavaScript
- firefox、opera等での番号の数え方
現在Javascriptを勉強中で 教材中での疑問なのですが 下の記述でどうしても腑に落ちないことがあります。 IEの方の[]の中の番号の数え方は分かるのですが firefox用ではどういう数え方をすれば node[0].childeNodes[5].childeNodes[1].innerHTML......... という数え方になるのでしょうか？ 開始タグと終了タグを分けて数えているのでしょうか？ 分かる方回答お願いします。 // IE用 function change(){ var node = document.getElementsByTagName("body"); node[0].childNodes[2].childNodes[0].innerHTML = "変更しました"; } // FireFoxやOpera用 function change(){ var node = document.getElementsByTagName("body"); node[0].childNodes[5].childNodes[1].innerHTML = "変更しました"; } --------HTML---------- <body> <h1>サンプル３</h1> <p>ここが変わります。</p> <div> <p>深いノード1</p> <p>深いノード2</p> </div> <form> <input type="button" value="変更" onclick="change();"> </form> </body>
- ベストアンサー
- JavaScript
