javascript - 我需要保留元素引用来传递

Question

当用户点击<a>时标记它调用如下函数:

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

此函数为需要引用第一个按钮的模式生成 HTML。

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

}

当点击模态框内的链接时，func2()应该将文本保存到第一个链接内的数据属性中，但这不起作用，返回:

"Uncaught SyntaxError: Unexpected identifier "

Answer 1

首先，不要使用内联 HTML 事件处理属性( onclick 、 onmouseover 等)， here's why 。

但是，您的实际问题是您没有正确声明您的函数。

这个:func1(elem)

需要是这样的:function func1(elem)

接下来，你<a>元素必须包含一些内容供其他人查看和点击，然后必须将其关闭，而您没有这样做。

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>

如果您修改答案以使用现代标准，则正确的现代方法是:

// 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>