前提・実現したいこと
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}

バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/16 15:01