javascript - 从 onclick() 事件调用函数时未捕获 ReferenceError

Question

我正在尝试使用 onclick() 事件调用用户脚本内的函数。我在第一次尝试中就使用此方法成功调用了。但我用第二种方法没有成功。

方法 1(有效):

function useradd(username) {
    layout.innerHTML = "";
    var name = "xyz";
    for (i = 0; i < username.length; i++) {
        if (name != username[i]) {
            layout.innerHTML += "<a href='#' onclick='javascript:calluser(this);' style='text-decoration:none'  >" + username[i] + "</a>" + "<br />";
        }
    }
}

通过将正确的用户名参数传递给函数，可以正常工作。

方法 2(无效):

 function useradd(username) {
    layout.innerHTML = "";
    var name = "xyz";
    for (i = 0; i < username.length; i++) {
        if (name != username[i]) {
             layout.innerHTML +="<ul class='list-unstyled'><li class='left clearfix'><span class='chat-img pull-left'>"
                                +"<img src='photo.jpg' alt='User Avatar' class='img-circle'></span>"
                                +"<div class='chat-body clearfix'><div class='header_sec'><div class='header_sec'><strong class='primary-font'>" + username[i] + "</strong>"
                                +"<a href='#' onclick='javascript:calluser(this);' class='btn btn-info btn-sm'><span class='glyphicon glyphicon-facetime-video'></span></a>"
                                +"</div></div></li></ul>";
        }
    }
}

我正在尝试传递 onclick='javascript:calluser(this);' 但我在控制台中遇到了 Uncaught Error 。因此 this 不被视为方法 1 的正确值。我还尝试过 onclick='javascript:calluser("+username[i]+");' 并出现以下错误。

如果用户名是“raju” 未捕获引用错误:raju 未在 HTMLAnchorElement.onclick 处定义

function calluser(user) {
  var Name = user;
  if (Name.length > 0) {
   //some operations   
 }
}

有什么建议可以传递参数吗？请帮忙 。

Answer 1

传递值应该类似于:onclick="calluser('${name}')"。

不要使用+来连接字符串，而是使用反引号`。

P.S.您的模板中有一些封闭的 div 标记。

试试这个代码:

function calluser(name) {
  if (name.length) {
    //some operations   
  }
}

function useradd(username) {
  layout.innerHTML = ``;
  var name = `xyz`;
  layout.innerHTML = username.map(name => `
    <ul class="list-unstyled">
      <li class="left clearfix">
        <span class="chat-img pull-left">
          <img src="photo.jpg" alt="User Avatar" class="img-circle">
        </span>
        <div class="chat-body clearfix">
          <div class="header_sec">
            <div class="header_sec">
              <strong class="primary-font">${name}</strong>
              <a href="#" onclick="calluser('${name}')" class="btn btn-info btn-sm">
                <span class="glyphicon glyphicon-facetime-video"/>
              </a>"
            </div>
          </div>
        </div>
      </li>
    </ul>
  `).join(`\n`)
}