如何在我的html中調用我的JS文件中的函數？

Question

我正在嘗試調用我在JS文件中編寫的函數，但是，當我運行服務器時沒有發生任何事情。 我不太確定我做錯了什么，我真的可以使用一些指導。

HTML：

<!DOCTYPE html>
<html>

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="group.js"></script>
<body>
<div class="emailForm">
    <input type="text" name="e">
    <input type="submit" onclick="addEmail(e)" value="Submit">
</div>
</body>

</html>

JS：

...
function addEmail(e){
    alert("test");
    user = {
        email: e,
        role: "MEMBER"
    };
    var group = "test@googlegroups.com";
    fetch('https://www.googleapis.com/admin/directory/v1/groups/'+ group +'/members',{ method: 'POST', body: $scope.user })
    .then(res => res.json()) 
    .then(json => console.log(json));
}

Answer 1

從js代碼中的函數中刪除參數。

function addEmail(){
var e=document.getElementById('email');
alert("test");
user = {
    email: e,
    role: "MEMBER"
};
var group = "test@googlegroups.com";
fetch('https://www.googleapis.com/admin/directory/v1/groups/'+ group 
+'/members',{ method: 'POST', body: $scope.user })
.then(res => res.json()) 
.then(json => console.log(json));
}

並且在HTML中還為輸入標簽添加ID並調用不帶參數的js函數。

<!DOCTYPE html>
<html>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="group.js"></script>
<body>
<div class="emailForm">
  <input type="text" id="email" name="email">
  <input type="submit" onclick="addEmail()" value="Submit">
</div>

Answer 2

通過使用本機javascript方法或使用jQuery等庫公開的方法分配事件處理程序，可以分離html標記和javascript代碼。 在原始代碼中， addEmail函數是從具有單個參數e的內聯事件處理程序調用的，該參數通常被指定為event 〜在這種情況下click

由於函數本身采用單個參數e並且函數使用相同的非引用參數e調用，因此它引用實際的click事件而不是名稱為e的HTML元素。 通過名稱明確引用函數內的元素，這個問題得到了緩解，代碼觸發了fetch請求，但由於被Google拒絕而無法進一步測試 - 錯誤如下。

<!DOCTYPE html>
<html>
    <head>
        <script src='//code.jquery.com/jquery-1.10.2.js'></script>
        <script src='group.js'></script>
        <script>
            document.addEventListener('DOMContentLoaded',e=>{


                const addEmail=function(){
                    let user = {
                        email: document.querySelector( 'input[name="e"]' ).value,
                        role: "MEMBER"
                    };
                    let group = "test@googlegroups.com";

                    /* what is $scope??? */
                    fetch( 'https://www.googleapis.com/admin/directory/v1/groups/'+ group +'/members',{ method: 'POST', body: $scope.user } )
                        .then( res => res.json() ) 
                        .then( json => console.log( json ) );
                }

                document.querySelector('input[type="submit"]').addEventListener('click',event=>{
                    addEmail.call( this );
                })
            });
        </script>
    </head>
    <body>
        <div class="emailForm">
            <input type="text" name="e" />
            <input type="submit" />
        </div>
    </body>
</html>

拒絕錯誤

{
 "error": {
  "errors": [
   {
    "domain": "global",
    "reason": "required",
    "message": "Login Required",
    "locationType": "header",
    "location": "Authorization"
   }
  ],
  "code": 401,
  "message": "Login Required"
 }
}

如何在我的html中調用我的JS文件中的函數？

問題描述

2 個解決方案

解決方案1
0 2019-03-26 05:38:55

解決方案2
0 2019-03-26 07:50:33

如何在我的html中調用我的JS文件中的函數？

問題描述

2 個解決方案

解決方案1 0 2019-03-26 05:38:55

解決方案2 0 2019-03-26 07:50:33

解決方案1
0 2019-03-26 05:38:55

解決方案2
0 2019-03-26 07:50:33