javascript 　　is undefined　解決できないのですがどうすればいいのでしょうか

最近Javascriptをいじいじり始めた初心者なのですが、ブラウザではエラーが出ず、開発環境の上ではエラーが出るというものに困っています。

html
1<html lang="ja">
2<head>
3    <meta charset="UTF-8">
4    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
5    <title>DOMとは</title>
6    <style>
7        #section-1 {
8            background-color: #C8E6C9;
9        }
10        #section-2 {
11            background-color: #FFF9C4;
12        }
13    </style>
14     <script src="javascript/scriptdom2.js"></script>
15</head>
16<body>
17
18<section id="section-2">
19    <h2>セクション2</h2>
20    <p>子ノード1</p>
21    <p>子ノード2</p>
22    <p>子ノード3</p>
23</section>
24    
25    <input type="button" value="実行する" onclick="change();">
26
27</body>
28
29</html>

javascript
1
2function change() {
3        var baseElement = document.getElementById('section-2');
4        var section2node2 = baseElement.childNodes[5];
5        section2node2.innerHTML = '子ノード2は変更されました';
6        var arrai = ['a', 'b', 'a','b', 'a', 'b', 'a', 'b', 'a', 'b', 'a', 'b', 'a', 'b', 'a', 'b', 'a',  'b'];
7        
8var i = 0;
9       
10       var id1=setInterval(function(){
11            
12                section2node2.innerHTML +=arrai[i];
13                if(i==15){
14                    clearInterval(id1);
15                }
16            i++; 
17        },500);
18  }

出ているエラーとしては
is defined but never used

is undefined

先ほどまではUnExpected token

というものも出ていました。

今までjavaを少しいじったりしましたが開発環境でエラーが出れほぼ実行できないという言語だったので戸惑っています。
javascriptは割りと解決できないエラーが起こって仕方ない言語なのでしょうか。

色々調べたのですが詳しく対策や解決方法が書いているサイトが少なく困っています。
これらの解決方法を教えていただきたいです。
あと、エラーとその解決法がまとめているサイトなどがあったら教えていただきたいです。

よろしくお願いします

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

回答3件

ベストアンサー

BracketsがデフォルトでESLintというlinter(構文チェッカー、静的検証ツール)が使用されておりそちらのチェックに引っかかってBrackets上のみエラーが出ているのではないでしょうか。(ブラウザではESLintはないため)

htmlのonclick属性にてメソッド設定しているので「scriptdom2.js」単体ではchangeメソッドは未使用ですし、またdocumentやsetIntervalやclearIntervalはブラウザ上ではwindowオブジェクトに生えてるので使用できますが、あくまで「scriptdom2.js」上のスコープにはそれらは定義されていないためエラーになるのではないかと思われます。

解決方法としては、
ファイル > 拡張機能マネージャ > 初期設定 > ESLint
を無効にしてあげればよいのではないでしょうか。

もしくはプロジェクト直下に「.eslintrc.json」というESLintの設定ファイルを配置して下記のように設定すれば良いと思われます。

{
    "rules": {
        "no-unused-vars": 0,
        "no-undef": 0
    }
}

※no-unused-varsは未使用のfunctionや変数をチェックするかどうか、no-undefは未定義のfunctionや変数を使用しようとした際チェックするかどうかで「0」にするとチェックしない=無効になる。

https://eslint.org/docs/rules/
ESLintのルールに関しては上記公式にあります。
もしくは日本語訳してくれている下記ページ
https://garafu.blogspot.com/2017/02/eslint-rules-jp.html

当方Bracketsや、ESLint及びlinter自体ガッツリ使ったことありませんのでどういう設定がベストかわからないのであくまで一時的な解決策になりますが......

投稿2018/07/04 14:26

QuineGhost

総合スコア25

is defined but never used

...は使用されていない

is undefined

...は定義されていない

双方ともごくごく基本的なエラーなのできちんと対処しましょう

投稿2018/07/04 14:03

y_waiwai

総合スコア87749

html側でonclick="change();"とやってますが、jsファイルを外部読み込みしているからではないでしょうか？
（ご提示されているコードをそのまま当方で試したところchange is not a functionというエラーが出ましたが質問者さまと同じエラーは出ていません。）

一応、当方で確認されたエラーの解消方法だけご提示しておきます。

以下のどちらかで解消すると思います。（当方では下記のどちらでも解消しました。）
0. 外部に読み込んでいるjsをhtml内に<script>〜</script>で読み込む
0. jsファイルは外部読み込みのままjsコードの一番最後にwindow.change = change || {};と記述する

このいずれかでエラーは解消されると思います。

[当方環境]
エディタ： VSCode or sublimetext3
確認ブラウザ： chrome

投稿2018/07/04 15:35