Uncaught ReferenceError when calling a function from onclick() event

Question

I am trying to call a function inside the user script using onclick() event . I have successfully called using this method in my first attempt . but i didn't succeed in second method .

Method 1 (working) :

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 />";
        }
    }
}

this is working fine by passing the correct username arguments to the function .

Method 2 (Non-working) :

 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>";
        }
    }
}

i am trying to pass onclick='javascript:calluser(this);' but i am getting uncaught error in console . So this is not considering as the correct value as method 1 . I have also tried with onclick='javascript:calluser("+username[i]+");' and getting below error .

if username is " raju" Uncaught ReferenceError: raju is not definedat HTMLAnchorElement.onclick

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

Any suggestion to pass the arguments ? Please help .

Answer 1

Passing value should be somelike this: onclick="calluser('${name}')" .

Don't use + to concat strings instead use backticks ` .

PS You have some enclosed div tag in your template.

Try this code:

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`)
}

Answer 2

I have find myself another simple alternative method . I have changed each username to string value by

var finalname = username[i];

and pass this string value to onclick event by

onclick='javascript:calluser(\""+finalname+"\");'

the complete working code look like

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>";
        }
    }
}