テキストボックスに入力された文字を読み込み、その文字に応じた結果をif文で設定し表示したい。

テキストボックスにカタカナを入力した場合はその英単語、英単語を入力した場合はそのカタカナが表示されるようにif文を記述したのですが（例：テキストボックスにappleと入力するとページ上のテキスト部分にリンゴと表示される）、文字を入力しボタンを押しても表示が変化しません。コンソールにはエラーの表記はなく、どこが間違っているのか分からず困っています…

HTML
1<!DOCTYPE html>
2<html><head>
3<meta charset="utf-8">
4<title>果物に関する英単語</title>
5<script>
6function translation() {
7    var name=document.getElementById("name").innerHTML;
8    var ans=document.getElementById("answer").innerHTML;
9
10    if(name=="apple") {
11           ans="リンゴ";
12    } else if(name=="リンゴ") {
13           ans="apple";
14    } else if(name=="grape") {
15           ans="ブドウ";
16    } else if(name=="ブドウ") {
17           ans="grape";
18    } else if(name=="strawberry") {
19           ans="イチゴ";
20    } else if(name=="イチゴ") {
21           ans="strawberry";
22    } else if(name=="peach") {
23           ans="モモ";
24    } else if(name=="モモ") {
25           ans="peach";
26    } else {
27           ans="登録されていません。";
28    }
29}   
30</script>
31<body>
32<p>果物のイラストと英単語</p>
33<div>
34<img id="img" src="kudamono.png">
35</div>
36<div id="answer">ここに英単語が表示されます</div>
37<p>
38<form name="myform">
39果物（カタカナまたは英単語）<input id="name" name="name" type="text">
40<input type="button" value="確認" onclick="translation()">
41</form>
42</p>
43</body>

原因がお分かりになる方、回答よろしくお願いします。（プログラミング初心者なので解説やコードと共に説明していただけると非常に嬉しいです。）

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

回答1件

ベストアンサー

function translation() {
    // inputの中身を取るのはinnerHTMLではなくvalueです
    var name=document.getElementById("name").value;
    // var ansdocument.getElementById("answer").innerHTML

    if(name=="apple") {
           ans="リンゴ";
    } else if(name=="リンゴ") {
           ans="apple";
    } else if(name=="grape") {
           ans="ブドウ";
    } else if(name=="ブドウ") {
           ans="grape";
    } else if(name=="strawberry") {
           ans="イチゴ";
    } else if(name=="イチゴ") {
           ans="strawberry";
    } else if(name=="peach") {
           ans="モモ";
    } else if(name=="モモ") {
           ans="peach";
    } else {
           ans="登録されていません。";
    }
    // ans変数にいれた値をanswerのinnerHTMLに戻してあげましょう
    document.getElementById("answer").innerHTML = ans;
}

投稿2021/01/09 14:08