検索フォームに入力されたものを

投稿しなおしました。ご迷惑おかけしてすみません、

HTMLで、検索フォームに入力されたものと連想配列内のkeyが一致した場合、その連想配列内の値を画面に表示できるようにしたいです。現在、以下のようなプログラミングを組んでます。配列名などは例です。

const data={
{name:"みかん",
english:"orange",
voice:"オレンジ"}，

{name:"りんご",
english:"Apple",
voice:"アップル"}
}

function Func(){
const search=document.getElementById("search").value;
//検索結果が含まれる場合
if(search in data){
document.writeln(${search}は、<br>${data.english} と表記し、${data.voice}と発音します。)
}else{
//検索結果が含まれなかった場合
document.writeln("検索結果がありません。<br>もう一度確認して入力しなおしてください。")
}
}
</script>

</head> <body> <h1 id="title">表記発音検索</h1> <input type="text" id="search" placeholder="くだものの名前を入力"> <button onclick="Func()">探す</button> </body> </html>

検索フォームに「みかん」と入力された場合、その場に「みかんは、orangeと表記し、オレンジと発音します。」と出るようにしたいです。

発生している問題・エラーメッセージ
検索結果が含まれている場合、『${search}は、<br>${data.english} と表記し、${data.voice}と発音します。』と、そのまま出てきます。
書き方が間違っているのは分かっているのですが、訂正の仕方がわからず、、、アドバイスを頂けると幸いです。そもそも、検索結果と連想配列内に入力しているものを関連付けることは可能でしょうか？

試したこと
＄を使用せず、
document.writeln(name + "は、<br>" + data.english +"と表記し、" + data.voice + "と発音します。")
と変えてみたりはしました、

アドバイスをどうぞよろしくお願い致します。

補足情報

y_waiwai

2021/08/01 11:20

質問文は編集できます無駄に質問建てないで、追記修正しよう

npa-2001

2021/08/01 12:15

回答ありがとうございました。訂正・修正しなおしました、、、

行動規範の内容に同意します

回答2件

const data={
{name:"みかん",
の部分から構文がおかしいのでエラーが起きており、プログラム自体動作していない状態だと思います。
script部分を修正したので、この状態で「みかん」と検索すると動作すると思います。

(1)dataの定義がおかしいのでdataArrとして定義し直しています。
(2)配列dataArrの中から一致しているデータを取得。
(3)${}を使用するには``で括る必要があります。

js
1	const dataArr = [{ //(1)
2		name:"みかん",
3		english:"orange",
4		voice:"オレンジ"
5	},{
6		name:"りんご",
7		english:"Apple",
8		voice:"アップル"
9	}];
10
11	function Func(){
12		const search = document.getElementById("search").value;
13		let data = dataArr.find(function(data){ //(2)
14			return search === data.name;
15		});
16		//検索結果が含まれる場合
17		if(data){
18			document.writeln(`${search}は、<br>${data.english} と表記し、${data.voice}と発音します。`); //(3)
19		}else{
20			//検索結果が含まれなかった場合
21			document.writeln("検索結果がありません。<br>もう一度確認して入力しなおしてください。");
22		}
23	}