I need to keep element reference to pass on

Question

When the user clicks on <a> tag it calls a function like the following:

<a href="#" onclick="func1(this)">;

This function generates HTML for a modal that needs to reference the first button.

func1(elem) {
  html='<div class="modaldiv">' +
  '<a href="#" onclick="func2(e.srcElement)">'+
  '</div>';

}

When the link inside the modal is clicked, func2() should save text into a data attribute inside the first link, but this is not working, returning:

"Uncaught SyntaxError: Unexpected identifier "

Where do you expect `e` to be defined? Technically you could use `onclick="func2(event.srcElement)"`, since `event` is defined in string-evaled event handlers, but this approach is considered bad practice and should be avoided. — Patrick Roberts, Sep 12 '17 at 17:43

Scott Marcus · Answer 1 · 2017-09-12T18:01:20.767

First, don't use inline HTML event handling attributes (onclick, onmouseover, etc.), here's why.

But, your actual problem is that you are not properly declaring your function.

This: func1(elem)

Needs to be this: function func1(elem)

Next, you <a> elements must have some content for someone to see and click on and they must then be closed, which you didn't have.

function func1(elem) {
  html='<div class="modaldiv">' + '<a href="#" onclick="func2(e.srcElement)">click me too</a>'+ '</div>';
  document.body.innerHTML += html;
}

<a href="#" onclick="func1(this)">click me</a>

If you rework your answer to use modern standards, the proper modern way to do this would be:

// Get references to DOM elements
var a1 = document.getElementById("firstAnchor");
a1.addEventListener("click", func1);

// Callback for first link:
function func1(e) {
  // Store original source element
  var src = e.srcElement;

  // Formally create new elements and configure them
  var d = document.createElement("div");
  d.classList.add("modaldiv");
  
  var a = document.createElement("a");
  a.href = "#";
  a.textContent = "Click me too!";
  // By hooking up to a wrapper function, we can have that function
  // pass arguments to the actual callback function:
  a.addEventListener("click", function(){
    func2(src);
  });
  
  // Add new elements to the document
  d.appendChild(a);
  document.body.appendChild(d);

}

function func2(firstSrc){
 console.log("func2 invoked and e.srcElement from first link is: ", firstSrc);
}

<a href="#" id="firstAnchor">click me</a>

Note that if you were to define `func2()`, you get `Uncaught ReferenceError: e is not defined` like I pointed out in comments. Perhaps you should address that too? — Patrick Roberts, Sep 12 '17 at 17:48
@PatrickRoberts I was working on an update to my answer, but had to take a phone call. — Scott Marcus, Sep 12 '17 at 17:59
Sorry, didn't mean to make you feel rushed or anything. Very thorough answer now~ — Patrick Roberts, Sep 12 '17 at 18:01
Hi scott, Thank you for your answer, but the errors you pointed out like no keyword function. I do found the information about not using inline event handlers very usefull, thanks for that. The code was just to illustrate my need. Emphatizing the real problem is on how to pass somekind of reference to a dom element — Diego Leitão, Sep 12 '17 at 18:15
@DiegoLeitão I'm not sure what you mean by *" but the errors you pointed out like no keyword function"* and my answer does show how to pass a reference to a DOM element. — Scott Marcus, Sep 12 '17 at 18:17

I need to keep element reference to pass on

1 Answers1