HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない

解決済

質問者：優里さん
質問日時：2024/01/05 17:48
回答数：3件

この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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2024/01/05 18:40

こんばんは

＞[object HTMLInputElement]というものが検索されてしまいます。
＞どうしてでしょうか。教えてください。
スクリプトでクエリ部に設定しているのが、objectだからです。
（id指定で、入力欄の要素そのものを文字列化したものになっています）

フォームのテキストに入力された文字列は、search関数内では変数 query に取得しているので、そちらをクエリ部として連結するようにすれば、ご希望の動作になると思います。
（エンコードしたほうが良いかも知れませんけれど）

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
私はJavaScriptはまだ勉強中です。
修正したJavaScriptも教えていただきたいです。
よろしくお願いいたします。

通報する

お礼日時：2024/01/05 18:47

No.3

回答者： fujillin
回答日時：2024/01/05 19:47

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);

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
解決しました。

通報する

お礼日時：2024/01/05 21:58

No.1

回答者： Ogre7077
回答日時：2024/01/05 18:31

> window.open("

https://www.bing.com/search?q=" + text);

変数 query を定義したなら、検索すべきは query だと思います。

> [object HTMLInputElement]

関数内で変数 text を定義していないので、
text とだけ書くと大域変数 window.text と見なされます。

この書き方をするとブラウザは後方互換性のために
document.getElementById("text") と解釈します。

text を暗黙的に文字列化しているので、
検索結果の HTMLInputElement のメソッド toString が呼び出され、
上記の文字列が発生すると推測します。