このHTMLは、フォームに入力されたテキストを表示ボタンが押されたら文字サイズ指定フォームに入力された文字サイズで表示されて、検索ボタンが押されたらフォームに入力されている内容をBingかGoogleで検索するというものなのですが、実行して検索ボタンを押すと[object HTMLInputElement]というものが検索されてしまいます。どうしてでしょうか。教えてください。よろしくお願いいたします。【以下HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーム</title>
<script>
function displayText() {
var text = document.getElementById("text").value;
var size = document.getElementById("size").value;
document.getElementById("display").innerHTML = "<p style='font-size:" + size + "px'>" + text + "</p>";
}
function search() {
var query = document.getElementById("text").value;
var engine = document.querySelector('input[name="engine"]:checked').value;
if (engine == "bing") {
window.open("https://www.bing.com/search?q=" + text);
} else if (engine == "google") {
window.open("https://www.google.com/search?q=" + text);
}
}
</script>
</head>
<body>
<form>
<label for="text">テキスト:</label><br>
<input type="text" id="text" name="text"><br>
<label for="size">文字サイズ:</label><br>
<input type="number" id="size" name="size" min="1" max="100"><br><br>
<label for="engine">検索エンジン:</label><br>
<input type="radio" id="bing" name="engine" value="bing" checked>
<label for="bing">Bing</label><br>
<input type="radio" id="google" name="engine" value="google">
<label for="google">Google</label><br><br>
<button type="button" onclick="displayText()">表示</button>
<button type="button" onclick="search()">検索</button>
</form>
<br>
<div id="display"></div>
</body>
</html>
No.2ベストアンサー
- 回答日時:
こんばんは
>[object HTMLInputElement]というものが検索されてしまいます。
>どうしてでしょうか。教えてください。
スクリプトでクエリ部に設定しているのが、objectだからです。
(id指定で、入力欄の要素そのものを文字列化したものになっています)
フォームのテキストに入力された文字列は、search関数内では変数 query に取得しているので、そちらをクエリ部として連結するようにすれば、ご希望の動作になると思います。
(エンコードしたほうが良いかも知れませんけれど)
ありがとうございます。
私はJavaScriptはまだ勉強中です。
修正したJavaScriptも教えていただきたいです。
よろしくお願いいたします。
No.3
- 回答日時:
No2です。
>修正したJavaScriptも教えていただきたいです。
ご提示のものが書けるのなら、修正も簡単だと思いますけれど??
2か所の「text」を「query」に変えれば良いだけです。
(逆でもいいですけれど・・・そちらの方法なら1ヶ所の修正)
>window.open("https://www.bing.com/search?q=" + text);
>window.open("https://www.google.com/search?q=" + text);
↓ ↓ ↓
window.open("https://www.bing.com/search?q=" + query);
window.open("https://www.google.com/search?q=" + query);
No.1
- 回答日時:
> window.open("
https://www.bing.com/search?q=" + text);変数 query を定義したなら、検索すべきは query だと思います。
> [object HTMLInputElement]
関数内で変数 text を定義していないので、
text とだけ書くと大域変数 window.text と見なされます。
この書き方をするとブラウザは後方互換性のために
document.getElementById("text") と解釈します。
text を暗黙的に文字列化しているので、
検索結果の HTMLInputElement のメソッド toString が呼び出され、
上記の文字列が発生すると推測します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tabindexの取得
-
ページ間で変数を保持したい
-
JavaScript Cookieについて
-
外部ファイルを読み込んで表示
-
URLの取得について教えてくださ...
-
入力するテキストエリアをボタ...
-
テキストエリアの制限字数以上...
-
テキストエリアへセットフォーカス
-
JavaScriptからphp関数の呼び出し
-
特定<table>内の<td>の色を変える
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
value内に変数を入れたい
-
ラジオボタンのチェックが外れ...
-
ラジオボタンにタブインデック...
-
チェックボックス付きのテーブ...
-
確認ダイアログの出し方(JavaS...
-
プルダウンで選択すると、DBの...
-
<input>の選択肢をプルダウンメ...
-
submitした値を返したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tabindexの取得
-
TextBoxに半角数字以外を入れた...
-
ページ間で変数を保持したい
-
JavaScriptでCGIの呼出し・...
-
テキストエリアに履歴を残したい
-
マイナスなら赤字で表示したい...
-
フォームの内容でリンク先URLの...
-
jQueryのdatepickerの日付が選...
-
プルダウンで選択された値を別...
-
VBscriptの配列変数をJavascrip...
-
onBlurのイベントを使ってデー...
-
改行コード変換しても、引数の...
-
HTMLファイル同士での値渡し
-
VBSからjavascript
-
HTMLとJavaScriptで作った表示...
-
FireFoxでfocus()が上手く動かない
-
カーソルが当たった箇所に吹き...
-
どちらかひとつのテキストボッ...
-
フォーカス設定について教えて...
-
一度もフォーカスされないテキ...
おすすめ情報