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调用了函数，因此它引用的是实际的点击事件，而不是名称为{的HTML元素。 {1}}。通过从名称中显式引用函数中的元素，可以缓解此问题，并且代码触发了e请求“确定”，但由于被Google拒绝而无法进一步测试-错误提示。

fetch

拒绝错误

<!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>

如何在html的JS文件中调用函数？

2 个答案: