質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

809閲覧

parcelでのバンドル時にUncaught ReferenceErrorが発生

Midori157

総合スコア8

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

0クリップ

投稿2018/04/14 04:11

前提・実現したいこと

parcelでバンドルしたjs内の関数を、inputタグのonclickで呼び出したい

発生している問題・エラーメッセージ

parcelでバンドル後に起動するサーバー http://localhost:1234 でページを開き、
対象のinputタグのbuttonを押した際に、
下記エラーメッセージが出力され、関数が実行されない状態です。

Uncaught ReferenceError: searchChiken is not defined at HTMLInputElement.onclick ((index):29)

対象タグ

html

1<input type="button" name="submit" value="submit" onclick="searchChiken()" >

該当のソースコード

全体コードリンク

構成

bash

1% tree src 2src 3├── css 4│   └── main.css 5├── index.html 6└── scripts 7 └── main.js 8

index.html

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>ChikenBako</title> 6 <link rel="stylesheet" href="./css/main.css"> 7</head> 8<body> 9 <!-- 省略 --> 10 11 <div class="chiken-output"> 12 <div>検索</div> 13 <form name="chiken-Search"> 14 <input type="text" name="word" placeholder="検索ワードを入力" > 15 <!-- ここの部分です --> 16 <input type="button" name="submit" value="submit" onclick="searchChiken()" > 17 <!-- --> 18 </form> 19 <div class="chikenOutputResult"> 20 <div>hoge</div> 21 <div>hoges</div> 22 </div> 23 </div> 24 <script type="text/javascript" src="./scripts/main.js"></script> 25</body> 26</html>

main.js

js

1function searchChiken() { 2 console.log('hello') 3 4 // 下記にやりたい処理記載 5}

.babelrc

json

1{ 2 "presets": [ 3 ["env", { 4 "targets": { 5 "browsers": ["last 2 Chrome versions"] 6 } 7 }] 8 ] 9}

bash

1# 実行コマンド 2% parcel src/index.html 3Server running at http://localhost:1234

試したこと

  • バンドル前のindex.htmlを直参照してsearchChiken()が呼び出されることを確認
  • scriptタグをhead内で読み込むように修正して実行→NG

補足情報(FW/ツールのバージョンなど)

バージョン

% node -v v9.2.0 % parcel -V 1.7.0

package.json

json

1{ 2 "name": "chikenbako", 3 "version": "1.0.0", 4 "repository": "xxxx", 5 "author": "xxxx", 6 "license": "MIT", 7 "devDependencies": { 8 "babel-core": "^6.26.0", 9 "babel-preset-env": "^1.6.1" 10 }, 11 "scripts": { 12 "start": "parcel src/index.html" 13 }, 14 "dependencies": { 15 } 16}
HayatoKamono👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

動かしてみた感じ js ファイルはモジュールになるようです
なので apiUrlsearchChiken はグローバルには定義されていません

onclick に指定するならグローバル変数でないといけないので最後に

js

1window.searchChiken = searchChiken

を加えたら動きました

投稿2018/04/15 09:04

lazex

総合スコア604

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Midori157

2018/04/16 15:01

ご回答ありがとうございます ???? windowオブジェクトに追加(グローバル変数化)により、解消できました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問