この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で質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない 7 2023/12/15 19:32
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- PHP アマゾンのような評価の星を選択した情報を確認画面でも表示させたいです。 1 2023/10/02 10:52
- JavaScript HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない 2 2023/12/18 18:12
- JavaScript Cookieに保存されない 1 2023/12/26 18:45
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript コードレビューをお願いします。 3 2023/12/17 01:07
このQ&Aを見た人はこんなQ&Aも見ています
-
「環境が人を育てる」って本当?環境によって人格や生き方は本当に変わるのか
環境が人生に与える影響は実際どれほどのものなのか、専門家の田宮由美さんに伺った。
-
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
HTMLで作った時報アプリが動きません
JavaScript
-
HTMLで画像をポップアップで表示するようにする方法
HTML・CSS
-
-
4
CSSでつくったメニューのアニメーションがうまく動かない・変えたい
HTML・CSS
-
5
デジタルブックを自分のウェブサイトに設置する方法を教えて
オープンソース
-
6
Colorboxがうまく設置できません
JavaScript
-
7
PHPでのパスワード制限のセキュリティはどうなのか
PHP
-
8
1ページに全部載せた方がseo的にいい?
SEO
-
9
かっこいいウェブを作るテク
HTML・CSS
-
10
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
11
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
12
HTMLでstyleを指定するフォームの作り方
HTML・CSS
-
13
Cookieに保存されない
JavaScript
-
14
HTMLで表をつくったのですがウィンドウの大きさを変化させると、表の真ん中の列だけ補足なり、表の中の
HTML・CSS
-
15
JavaScriptでページが更新されたときに./へ自動遷移するようにする方法を教えて
JavaScript
-
16
ワードプレスインストールできない
オープンソース
-
17
disabled プロパティが表示されない原因が分からない
JavaScript
-
18
ボタンを押したあとに画像を表示させる方法についてアドバイスお願い致します
JavaScript
-
19
HTMLタグに複数のクラスを設定する方法がわからない
JavaScript
-
20
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLファイル同士での値渡し
-
テキストエリアに履歴を残したい
-
jQueryのdatepickerの日付が選...
-
改行コード変換しても、引数の...
-
どちらかひとつのテキストボッ...
-
大文字か小文字かを判断する方法
-
tabindexの取得
-
ページ間で変数を保持したい
-
return trueとreturn falseの用...
-
value内に変数を入れたい
-
プルダウン 項目が多いので先頭...
-
【jQuery】input nameの文字列...
-
フォームが空欄の時にフォーム...
-
tableの任意行にfocusをあてる
-
select要素のvalueを配列で取得...
-
同じ名前のセレクトがある場合...
-
onClick="this.form.submit
-
onclickで2個指定するには?
-
ボタンを押すとテキストボック...
-
onchangeイベントを強制的に発...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TextBoxに半角数字以外を入れた...
-
ページ間で変数を保持したい
-
HTMLファイル同士での値渡し
-
tabindexの取得
-
プルダウンで選択された値を別...
-
マイナスなら赤字で表示したい...
-
フォームの内容でリンク先URLの...
-
テキストエリアに履歴を残したい
-
テキストボックスに入力した色...
-
イベント発生順序
-
どちらかひとつのテキストボッ...
-
HTMLとJavaScriptで作った表示...
-
VBSからjavascript
-
GetElementByIdがうまく取得で...
-
大文字か小文字かを判断する方法
-
JSPでonChangeを強制発行するに...
-
VBScriptでpingを実行(ブラウザ...
-
javascriptのちょっとした動作...
-
VBscriptの配列変数をJavascrip...
-
画像の表示非表示について質問です
おすすめ情報