inputの中身を書き換える方法について
- input要素の中身を書き換える方法について、jQueryを使用してテキストを変更することができます。
- 書き換え実行ボタンを押下すると、特定の要素のテキストを変更することができます。
- div要素とは異なり、input要素の場合は.val()メソッドを使用してテキストを変更することができます。
- ベストアンサー
inputの中身を書き換える方法について
下記で書き換え実行ボタンを押下すると、初期値1は変更後1に変わるのですが、初期値２と初期値３が変わりませんでした。 そのため、inputの中を書き換えるには、divの場合とは違う書き方をしないといけないのかと思ったのですが、どのように記述すればよいかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <!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-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#change").click(function(){ $("#text1").html("変更後１"); $("#text2").html("変更後２"); $("#text3").html("変更後３"); }); }); // --> </script> <title>title</title> </head> <body> <form> <input id="change" type="button" value="書き換え実行" /> </form> <br /> <div id="text1">初期値１</div> <input type="text" name="text2" id="text2" value="初期値２" /> <input type="hidden" name="text3" id="text3" value="初期値３" /> </body> </html>
- iroha_168
- お礼率89% (204/228)
- AJAX
- 回答数1
- ありがとう数9
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
jQueryでinputのvalue値を変更する場合は、 $("#text2").html("変更後２"); ではなく、 $("#text2").val("変更後２"); です。
関連するQ&A
- HTML内の値を取得し、別の箇所にコピーする方法
下記のソースで書き換え実行ボタンを押下すると、2行目の表示内容を1行目にコピーした上で、2行目の内容を削除したいと思いました。 2行目の内容の削除は下記の3行で出来ていると思います。 $("#text2_1").html(""); $("#text2_2").val(""); $("#text2_3").val(""); ただし、2行目の内容を1行目にコピーする所がわかりませんでした。 $("#text1_1").html("2行目"); $("#text1_2").val("2行目"); $("#text1_3").val("2行目"); 上記3行の「2行目」と固定で記述されている箇所の代わりに、下記3行の値を取得する記述をしないといけないのかと思ったのですが、どのように記述すればよいかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <div id="text2_1">2行目</div> <input type="text" name="text2_2" id="text2_2" value="2行目" /> <input type="hidden" name="text2_3" id="text2_3" value="2行目" /> 【ソース】 <!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-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#change").click(function(){ $("#text1_1").html("2行目"); $("#text1_2").val("2行目"); $("#text1_3").val("2行目"); $("#text2_1").html(""); $("#text2_2").val(""); $("#text2_3").val(""); }); }); // --> </script> <title>title</title> </head> <body> <form> <input id="change" type="button" value="書き換え実行" /> </form> <br /> <div id="text1_1">1行目</div> <input type="text" name="text1_2" id="text1_2" value="1行目" /> <input type="hidden" name="text1_3" id="text1_3" value="1行目" /> <div id="text2_1">2行目</div> <input type="text" name="text2_2" id="text2_2" value="2行目" /> <input type="hidden" name="text2_3" id="text2_3" value="2行目" /> </body> </html> 以上、宜しくお願いします。
- ベストアンサー
- AJAX
- jquery、javascriptについて
あるdivエリア内をクリックすると、特定のチェックボックスに チェックが入るということをしています。 （チェックボックスにチェックを入れるとdiv内の色が変わります。） つまり、divとチェックを連動させたいのです。 その部分は下記でできたんですが、 <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div#first").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.first").attr("checked","checked"); $("div#first").css("background-color","#FF0000"); }); $("input.first").click(function(){ $("div#first").css("background-color","#CCCCCC"); }); }); $(function(){ $("div#second").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.second").attr("checked","checked"); $("div#second").css("background-color","#FF0000"); }); $("input.second").click(function(){ $("div#second").css("background-color","#CCCCCC"); }); }); </script> </head> <body> <div id="first" style="width:20px; height:20px; background-color:#CCCCCC" >1</div> <div id="second" style="width:20px; height:20px; background-color:#CCCCCC">2</div> <input class="first" name="test" type="checkbox" value="" /> <input class="second" name="test" type="checkbox" value="" /> </html> 全部で、その組み合わせを10箇所作りたいのですが、 function?を単純に10個複製すればできますが、 もっと簡単にまとめる方法はないのでしょうか？ さらに贅沢をいうと、 <div>と<input>は上記では、first,secondのように、id,class名で あわせてますが、ポジションなどで連動できるともっといいです。 1番目のdivをクリックしたら、inputの一番目にチェックのようなことです。 そんなことができるのでしょうか？ 具体的に教えていただけると幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- JavaScriptを使ってWebページにメッセージを表示させる
html内に<div id="info"></div>と書き、それをjavascriptのプログラムから「こんにちは」というメッセージを表示させるようにしたいのですが、何度試しても製作途中の段階でdocument.getElementById(id) has no propertiesというエラーが出てしまいます。（←Firebugでエラーが検出されます） どこが間違っているのか教えていただけると助かります。 ================= HTML ================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>map</title> <link rel="stylesheet" type="text/css" href="common/css/main.css" /> <script src="common/js/main.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="info"></div> </body> </html> ================= JavaScript ================= var map window.onload = function() { load(); } function _d(id, htmlTxt) { document.getElementById(id).innerHTML = htmlTxt; } _d("info","こんにちは");
- 締切済み
- JavaScript
- javascript初心者です。
javascript初心者です。 下記のソースコードで、単純に、マウスホーバーで、テキストの内容を切り替えるものですが、 IE8ですと動作しますが、Firefox3.5だと動作しません。 なにか、原因あるのでしょうか。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script language="javascript" type="text/javascript"> function formcalc(formobj){ var val_a= formobj.elements["para_a"].value; var val_b= formobj.elements["para_b"].value formobj.elements["answer"].value = val_a * val_b } function chktext(){ var obj = document.getElementById("id1"); obj.innerText="テキスト変更しました。"; } </script> </head> <body> <form> <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" /><br /> <input type="button" name="keisan" value="計算" onclick="formcalc(this.form)" /> </form> <br /><br /><br /><br /> <p id="id1" onMouseOver="this.innerText='受付終了'">最初のテキスト</p> </body> </html>
- ベストアンサー
- JavaScript
- 画面（ウィンドウ）／画像の拡大縮小について
PHP/JavaScript初心者です。 ＰＨＰとＪａｖａＳｃｒｉｐｔと以下のようなことをしてます、 画面（ウィンドウ）上に画像が表示し 「拡大」ボタンを押したら ウィンドウ／画像を拡大して表示 「リセット」ボタンを押したら ウィンドウ／画像を元のサイズに戻してして表示 をしたいのですが、どうすればいいですか？ 関連ありそうな、ソースを以下に書きます。 dspimg.php <!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> <title>文献表示</title> <meta http-equiv="Pragma" content="No-Cashe" /> <meta http-equiv="Cache-Control" content="No-Cache" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript"> <!-- //画面／画像を拡大／縮小 function win_zoom(w,h){ window.resizeTo(w,h) location.reload(); } //--> </script> </head> <body> echo '<img id="dspimg" src="ppp.jpeg" alt="ppp.jpeg" width=600 height=400 " />'; <?php //拡大 ?> <INPUT type="button" Value="拡大" onclick="win_zoom(800,700)" > echo '<div align="center">'; <?php //リセット ?> <INPUT type="button" Value="リセット" onclick="win_reset(600,500)" > </div> </body> </html>
- ベストアンサー
- JavaScript
- 文字数カウンタにsetIntervalを使うには
JavaScript初心者です。 JavaScriptで残り入力可能文字数を表示するカウンタを作成したのですが 以下のプログラムだとコピペしたときカウントがされません。 そこでsetIntervalを使ってカウントできるようにしたいのですがどのように 「変数(省略可) = setInterval(関数名,ミリ秒)」 を流用すればよいのかイマイチわかりません。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> <script type="text/javascript"><!-- function ShowLength( str ) { document.getElementById("inputlength").innerHTML = 20 - str.length + "文字入力できます"; } // --></script> </head> <body> <input type="text" name="title" size="50" maxlength="20" onkeyup="ShowLength(value)"><br /> あと<a id="inputlength">20文字入力できます</a> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryを使ったスクロール画面が正しく作動しません。
jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span> テスト</span> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- [JS] IEでjavascriptを呼び出せない
ページの読み込み時にリンク先をjavascriptの関数に変更しています。 IEではlocalhostなら変更後の関数を呼び出せるのですが、 IPでアクセスすると変更後の関数を呼び出せていないようです。 FF/Chrome/Operaではいずれの場合もうまくいきます。 具体的には、IEで以下のhtmlを http://localhost/ で読み込むと"change"をクリックで"changed!"に変更される http://192.168.0.1/ で読み込むと"change"をクリックしても何も変わらない。 何が問題なのでしょうか。 +++問題のindex.html++++++++++++++++++ <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <body> <a href="#" id="change">change</a> <div id="test">TEST</div> <div> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> t = new test(); function test(){ var self = this; self.change = function(arg){ document.getElementById("test").innerHTML = "changed!"; return false; } } document.getElementById("change").setAttribute("onclick", "return t.change();"); </script> </div> </body> </html> +++++++++++++++++++++++++++
- 締切済み
- JavaScript
- js 引用符
<!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=UTF-8" /> <title>サンプル</title> </head> <body> <div id="a"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script src="fastclick.js"></script> <script> $(function(){ var retinaSwitch = window.<span class="searchword">devicePixelRatio</span>; if(retinaSwitch == 1) { $('#container').html('Retinaディスプレイではありません'); } else if(retinaSwitch == 2) { $('#container').html('Retinaディスプレイです'); } }); </script> </body> </html> javascriptのコードなのですがWebサイトからコピペした文章が上手く反映されません。引用符関係のイージーミスだとは思うのですが、ちょっとドツボに嵌っているので、ご指摘頂ければと思います。
- ベストアンサー
- JavaScript
- アップロードができるようにしたいのですが・・。
こんにちは。お世話様になります。 ホームページで画像などがアップできて、表示ができるようにアップロードボタンを作りたいと思っています。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>画面遷移なしでファイル(画像)アップロード</title> </head> <body> <form action="http://●●●/upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="max_file_size" value="1000000" /> <input type="file" name="upload_image" /> <input type="submit" value="画像アップロード" /> </form> <div id="container"></div> <iframe name="upload_frame" style="display:none;"></iframe> </body> </html> ---phpファイル---- <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>画像アップロード（iframe内）</title> </head> <body> <?php $upload_dir = './'; $filename = $_FILES['upload_image']['name']; move_uploaded_file($_FILES['upload_image']['tmp_name'], $upload_dir.$filename); ?> <script type="text/javascript"><!-- var container = parent.document.getElementById('container'); image = parent.document.createElement('img'); image.src = './<?php print($filename);?>'; container.appendChild(image); //--></script> </body> </html> ネットで調べて、このようにしたのですが、画像をアップしようとしても表示されません。 何がいけないのでしょうか・・・。 大変恐れ入りますが、詳しい方はご教示くださいませ。 宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 ご教示いただいたソースで意図した動作となりました。 このたびはどうもありがとうございました。 以上、よろしくお願いします。