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

时间:2018-03-09 06:52:03

标签: javascript html function onclick

我正在尝试使用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);',但我在控制台中收到了未被捕获的错误。所以this没有考虑作为方法1的正确值。我也尝试过使用onclick='javascript:calluser("+username[i]+");'并低于错误。

如果用户名为&#34;拉朱&#34; 未捕获的ReferenceError:未在HTMLAnchorElement.onclick中定义raju

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

任何传递参数的建议?请帮忙 。

2 个答案:

答案 0 :(得分: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`)
}

答案 1 :(得分:0)

我发现自己是另一种简单的替代方法。我已将每个用户名更改为字符串值

var finalname = username[i];

并通过

将此字符串值传递给onclick事件
onclick='javascript:calluser(\""+finalname+"\");'

完整的工作代码如

function useradd(username) {
    layout.innerHTML = "";
    var name = "xyz";
    for (i = 0; i < username.length; i++) {
        if (name != username[i]) {
             var finalname = 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(\""+finalname+"\");' class='btn btn-info btn-sm'><span class='glyphicon glyphicon-facetime-video'></span></a>"
                                +"</div></div></li></ul>";
        }
    }
}