Javascriptでフォームからの文字列に対してinnerHTMLを使って返事をしたい

Question

###Javascriptでフォームからの文字列に対してinnerHTMLを使って返事をしたいです。

HTMLで作ったフォーム(form)から来た文字列に対して決まったものを表示するみたいなことがしたいです。
まず最初に「天気」という文字列をフォームに入れて送信したら天気の情報がiframeでかえってくるみたいなことがしたいです。
これで動くかな～と思って試してみたところ動きもしませんでした。

該当のソースコード

function hanasu() {
    target = document.getElementById('hennji');
    textbox1 = document.forms.fm2.id_textbox1.value;
    var tenki = '天気';
    if (textbox1 == tenki) {
        target.innerHTML('<iframe id="forecast_embed" type="text/html" frameborder="0" height="245"
width="100%" src="http://forecast.io/embed/#lat=35.689487&lon=139.691706&
name=Tokyo&units=si"></iframe>');
    } else {
        target.innerHTML('<p>お答えできません。</p>');
    }

}

<FORM name="fm2">
        
            <input size="20" type="text" name="Z" style="background:#ffffff;" name="textbox" id="id_textbox1">
            <input type="button" value="送信" onclick="hanasu()" class="btn btn-primary">
            <div id="hennji" style="color: red;">

            </div>
        
    </FORM>

試したこと

googlechromeで試しました

---

結構初心者なので、分かりやすく説明してくださると幸いです。
よろしくお願いします。

Answer 1

innerHTMLはプロパティです。functionのように使ってはいけません。以下のようにすると…

target.innerHTML('string');

Ctrl+Shift+Iで開くデベロッパーツールのConsoleタブで

Uncaught TypeError: target.innerHTML is not a function

と怒られます。正しくは、

target.innerHTML='string';

です。

確認可能なように修正したものを全文載せておきます。

<script>
function hanasu() {
    target = document.getElementById('hennji');
    textbox1 = document.forms.fm2.id_textbox1.value;
    var tenki = '天気';
    if (textbox1 == tenki) {
        target.innerHTML='<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=35.689487&lon=139.691706&name=Tokyo&units=si"></iframe>';
    } else {
        target.innerHTML='<p>お答えできません。</p>';
    }
}
</script>
<FORM name="fm2">
	<input size="20" type="text" name="Z" name="textbox" id="id_textbox1">
	<input type="button" value="送信" onclick="hanasu()">
	<div id="hennji">
	</div>
</FORM>

これを拡張子.htmlで保存してダブルクリックすれば確認出来るはずです。
スタイルは抜きました。

Comments

[退会済みユーザー]

おかげで成功しました。
ありがとうございました。

Answer 2

id属性ではなくname属性で指定しますので

textbox1 = document.forms.fm2.textbox.value;

ではないでしょうか。

Comments

[kyoya0819]

id属性,name属性が何方か一方でも混在していても取得できます。

https://www.ipentec.com/document/javascript-get-textbox-value
の真ん中より少し下にある「補足」に書いてあります。

MDNはhttps://developer.mozilla.org/ja/docs/Web/API/Document/forms
仕様書はhttps://html.spec.whatwg.org/multipage/dom.html#dom-document-forms

[shun-K]

そうなのですね！
ツッコミありがとうございます。

Answer 3

エラーコードはみましょうSyntaxError: Unexpected EOF（要は「改行すんなよ〜」ってことです）

function hanasu() {
    target = document.getElementById('hennji');
    textbox1 = document.forms.fm2.id_textbox1.value;
    var tenki = '天気';
    if (textbox1 == tenki) {
        target.innerHTML = '<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=35.689487&lon=139.691706&name=Tokyo&units=si"></iframe>';  //ここの改行と括弧を消す
    } else {
        target.innerHTML = '<p>お答えできません。</p>';
    }

}

どうしても.innerHTMLで改行したいなら

ここをご参考になさってください。

Comments

[退会済みユーザー]

エラーコードはどうやってみればよいですか？
使っているエディタはVisual Studio Codeを使っています。
それと、かいぎょうはしていないと思います。
teratailに投稿するときに、勝手に改行されたと思います。（多分です。多分）

[kyoya0819]

VSCでも確認できると思いますが（使ったことないから確証はない）Chromeからでも確認できます。

https://www.javadrive.jp/javascript/error/index5.html

が参考になると思います。

[kyoya0819]

ちなみにコピペすると動作することは確認済みです。
https://codepen.io/asuchi0819/pen/pooZvZM
上がサンプルです。

[退会済みユーザー]

javascriptは動作しているのですか？
送信ボタンを押しても、反応しません。
enterを押したら、

Referred from Pen pooZvZM
What happened?

A link in this Pen has a missing `href` value, or this Pen is trying to change the document.location more details

と出ました。

[kyoya0819]

innerHTMLを()で囲っているせいです。
空白で押して見てください。

[退会済みユーザー]

asuchi0819さん。
色々参考になりました。
ありがとうございます。