###前提・実現したいこと
JavaScript言語を参考書とネットで学習しながら進めている中で、
・コード全体を即時関数でくくると、変数の意図しない競合を防ぐことができる
・strictモード推奨
とのことで「ほうほう、そんな技が」と
普通に動いていた練習中のプログラムを『(function(){~}());』で囲ってみたところ、
以下のinputでどうしても『'disp' is undefined』のエラーが出て、
その理由を突き止められずにいます。
###発生している問題・エラーメッセージ
即時関数で囲わなければ、取りあえずは思った通りに動いてくれていました。(多くの妥協点はありますが。) Strictモードを有効にしても問題無かったです。 『(function~』で囲ったときだけ、dispが見えなくなるっぽいのですが その原因が分かりません。 回避方法はいくらでもあるでしょうけど、それよりも、このエラーの理由を知りたいです。 そもそも論として、何か大きな勘違いをしているのだろうとは思います・・
###該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>お試し</title> 6</head> 7<body> 8<label for="guess">数値をどうぞ</label> 9<input type="number" id="guess" size="2" value="0" maxlength="2" /> 10<input type="button" id="kettei" value="決定" onClick="disp()" /> 11 12<div id="hyouji">表示</div> 13 14<script type="text/javascript" src="js/main.js"></script> 15</body> 16</html> 17
JavaScript
1(function() { 2 'use strict'; 3 4function disp() { 5 let hyouji = document.getElementById("hyouji"); 6 let guess = document.getElementById("guess").value; 7 hyouji.textContent = "はい、" + guess + "ですね!"; 8} 9 10}()); 11
###試したこと
元の完成形は単純な数当てゲームで、エラーが出ない大丈夫だったところを削っていくと、上記の部分が残りました。
jsファイルの1行目『(function(){』と、最終行『}());』をコメントアウトすると問題無く動きます。最終行は『})();』の形も試しました。(特に変わりませんが)
ネットで無名関数や即時関数、Strictモードについても検索して読みましたが、欲しい情報に到達することが出来ませんでした。
input文とonClickも調べたつもりです。
しかしまだまだあまりにもド素人すぎて、自分の知識不足・理解不足を痛感するばかりでした。
###補足情報(言語/FW/ツール等のバージョンなど)
即時関数で囲わなければ動くのだから、いったん保留して基礎学習を進めるしかないか・・と思っていたところ、こちらのサイトを見つけました。よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/02 18:16
2017/07/07 23:43
2017/07/08 06:35