- ベストアンサー
JavaScript初心者のためのマウスホーバーでテキストを切り替える方法
- JavaScriptを使用したマウスホーバーでテキストの内容を切り替える方法について、初心者向けに解説します。
- この方法はIE8では正常に動作しますが、Firefox3.5では動作しない場合があります。原因を調査し、対処方法を解説します。
- さらに、JavaScriptを使用してフォームの計算も行う方法を紹介します。入力された2つの値を掛け算し、結果を表示する方法です。
- uff-n
- お礼率54% (47/87)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
直すところはいっぱいあると思うんですが、 まずinput[type="text"]のvalueは文字列であり、 足し算の時におかしくなる(10+20=1020)ので、 parseIntやNumber、0を減算するなどして数値に変換しましょう。 http://www.tohoho-web.com/js/number.htm 【文字列を数値に変換する】の項。 parseInt(formobj.elements["para_a"].value); Number(formobj.elements["para_a"].value); formobj.elements["para_a"].value - 0; セミコロン「;」はちゃんと書いとくほうが良いかも。 function chktext(){ はどこでも呼ばれていませんが？ XHTMLでは属性名(onmouseover)は小文字で書くべし。 余白を取るのに<br />を連続して使用するなかれ。 ブロック要素にonmouseoverをセットすると、 その要素のエリアいっぱいにマウスが反応してしまうので、 テキスト自身だけにしたい場合は<span>などインライン要素にすべし。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title xml:lang="ja" lang="ja">無題ドキュメント</title> <script language="javascript" type="text/javascript"> function formcalc(formobj){ var val_a = parseInt(formobj.elements["para_a"].value); var val_b = parseInt(formobj.elements["para_b"].value); formobj.elements["answer"].value = val_a * val_b; } function chktext(){ var obj = document.getElementById("id1"); obj.innerHTML="テキスト変更しました。"; } </script> </head> <body> <form action="#"> <p> <input size="10" type="text" name="para_a" value="0" />× <input size="10" type="text" name="para_b" value="0" />= <input size="10" type="text" name="answer" /> </p> <p> <input type="button" name="keisan" value="計算" onclick="formcalc(this.form)" /> </p> </form> <p> <span id="id1" onmouseover="this.innerHTML='受付終了'">最初のテキスト</span> </p> </body> </html>
その他の回答 (2)
- zeff
- ベストアンサー率69% (137/198)
大事なことを書き忘れました。 innerTextはIE独自のものなので、 innerHTMLとかfirstChild.nodeValueで行なったほうがいいです。
お礼
遅くなってしまいましたが、ご回答いただき、誠にありがとうございました！
- babu_baboo
- ベストアンサー率51% (268/525)
innerText が、使えないから。
お礼
ありがとうございます！！ ご丁寧に解説していただき、 心より感謝いたします！！