为什么我的 JS 函数参数未定义？

Question

我有一个接受好友请求的脚本加载，我的 onclick 函数是：onclick="acceptfriendrequest('John');"更多细节 ：echo  "<br><div style='width:100%; height: 30px;'><div class='userpic' style='background-image: url($avatar); margin-left: 10px; float: left;'></div><p class='incomingfriendrequests' style='float: left; margin-top: 7px; margin-left: 8px;'>$usernames</p><input type='submit' onclick='acceptfriendrequest($usernames)' style= 'margin-left: 10px; margin-top: 6.5px; float: left;' name='accept' value='Accept'><input type='submit' style= 'margin-left: 10px; margin-top: 6.5px; float: left;' name='deny'onclick='declinefriendrequest($usernames)'  value='Deny'></div>";但出于某种原因，我的控制台显示：Uncaught ReferenceError: John is not defined at HTMLInputElement.onclick。这是它链接到的功能：function acceptfriendrequest(username) {  var fd = new FormData();  fd.append("username", username);  fd.append("accept", true);  var xhr = new XMLHttpRequest();  var fullurl = '../backend/friends.php';    xhr.open('POST', fullurl, true);    xhr.onload = function() {      if (this.status == 200) {        loadfriends();      };  };  xhr.send(fd);}请帮助

Answer 1

在开发工具中查看由 PHP 生成的代码，它给出了这个（假设 $usernames='John' 在 PHP 中，并且只是一个名字，而不是一个数组）

<br><div style='width:100%; height: 30px;'><div class='userpic' style='background-image: url(); margin-left: 10px; float: left;'></div><p class='incomingfriendrequests' style='float: left; margin-top: 7px; margin-left: 8px;'>John</p><input type='submit' onclick='acceptfriendrequest(John)' style= 'margin-left: 10px; margin-top: 6.5px; float: left;' name='accept' value='Accept'><input type='submit' style= 'margin-left: 10px; margin-top: 6.5px; float: left;' name='deny'onclick='declinefriendrequest(John)'  value='Deny'></div>)

查看接受好友请求和拒绝好友请求的调用。他们那里有 John，而不是字符串，而且它需要是一个字符串，正如一些评论员以某种方式指出的那样。

需要更改的是 PHP，onclick='acceptfriendrequest($usernames)' 需要添加引号。

这是修改后的 PHP 回显——我将元素拆分为换行符以使事情更清楚，并以基本方式添加必要的引号以显示正在发生的事情：

echo  "<br><div style='width:100%; height: 30px;'>

        <div class='userpic' style='background-image: url($avatar); margin-left: 10px; float: left;'></div>

        <p class='incomingfriendrequests' style='float: left; margin-top: 7px; margin-left: 8px;'>$usernames</p>

        <input type='submit' onclick='acceptfriendrequest(".'"'.$usernames.'"'.")' style= 'margin-left: 10px; margin-top: 6.5px; float: left;' name='accept' value='Accept'>

        <input type='submit' style= 'margin-left: 10px; margin-top: 6.5px; float: left;' name='deny'onclick='declinefriendrequest(".'"'.$usernames.'"'.")'  value='Deny'>

        </div>";

Answer 2

我希望这对你来说很清楚:)

在 HTML onclick 中，您需要放置不带任何参数或 () 的函数：

 // function without () or arguments

 onclick=acceptfriendrequest

在 JavaScript 中使变量中的参数超出函数范围，然后在函数中使用此变量作为参数：

// variables as argument     

let username = "Name";

// function without arguments

function acceptfriendrequest() {

  // use variables in function :)

  var fd = new FormData();

  fd.append("username", username);

  fd.append("accept", true);

  var xhr = new XMLHttpRequest();

  var fullurl = '../backend/friends.php';

  xhr.open('POST', fullurl, true);

  xhr.onload = function() {

    if (this.status == 200) {

      loadfriends();

    };

};