htmlからjavascript内の関数を呼び出す方法

uma110

総合スコア4

1グッド

2クリップ

投稿2019/12/30 10:04

編集2019/12/30 18:46

前提・実現したいこと

html内のbody内からjavascript内の関数を呼び出したいのですが、

Uncaught ReferenceError: openNote is not defined
at HTMLInputElement.onclick (index.html:27)

というエラーメッセージが出てしまいます。

html内の
headタグの中で

main.jsを呼び出し、
bodyタグ中でmain.js内の関数
openNote(){}
を呼び出そうとしたのですが、

では、何か記述がおかしいのでしょうか？

openNote関数はグローバル関数にしていますが、なぜか呼び出しがされません。

headタグに直接javascriptを記述した場合、上記の呼び出しでしっかり呼び出してくれるんですが、外部からのjsの呼び出しと変わってくるのはなぜでしょうか？

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

エラーメッセージ

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>NoteWeb-App</title>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  <script defer src="/__/firebase/7.6.0/firebase-app.js"></script>  <script defer src="/__/firebase/7.6.0/firebase-auth.js"></script> <script defer src="/__/firebase/7.6.0/firebase-database.js"></script> <script defer src="/__/firebase/7.6.0/firebase-messaging.js"></script> <script defer src="/__/firebase/7.6.0/firebase-storage.js"></script>  <script defer src="/__/firebase/init.js"></script> <script type="text/javascript" src='main.js'></script> </head> <body> <h1>Hello</h1> <div id="user-name">No-User</div> <input id="login-button" type="image" src="UI/signinImage.png" alt="LOGIN"> <br> <input id="opennote-button" type="button" onclick="openNote()" value="Open Note"> </body> </html>

var signinCompleted = false;

function openNote() {
console.log("open judge -> "+signinCompleted)
if (signinCompleted) {
location.href = "./note.html";
}else{
console.log("Signin if you want to open note");
}
}

window.onload = function () {
var loginButton = document.getElementById("login-button");
var username = this.document.getElementById("user-name");

loginButton.addEventListener("click", event => {
var provider = new firebase.auth.GoogleAuthProvider();
this.console.log("aaa");
firebase.auth().signInWithPopup(provider).then(function (result) {
console.log("func on");
signinCompleted = true;
username.innerHTML = result.user.displayName;
// This gives you a Google Access Token. You can use it to access the Google API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
})
.catch(function (error) {
console.log(error);
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
});
};

試したこと

ここに問題に対して試したことを記載してください。

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

別のjsファイルを作り、試したところ、普通に関数を呼び出すことができました。
firebaseのmain.jsが何か引っかかっているようです。
microsoft edgeでは、main.jsでもできたのに対して、chromeでローカルサーバーで動かしてみると、上記のような事になるところまでは発見しましたが、それ以上はよく分かりません。