Question

我正在构建一些js功能，我将在页面上创建2个元素

var createBtn = function(
  var btn = document.createElement('button')
  ...
)

var createIframe = function(
  var iframe = document.createElement('iframe')
  ...
)

非常基本的东西，但后来我想在按钮上添加一个事件监听器，将一个样式属性应用于iframe。

类似的东西：

var displayIframe = function(
  Iframe.style['display'] = 'block'
)

button.addEventListener('click', displayIframe)

我的问题是如何在创建它们之后访问这些元素，而不必经历将类附加到它们并以这种方式再次访问它们的麻烦。从某开始就有可能在创建函数中访问它们。

Answer 1

您的代码几乎是正确的，但需要进行一些更改

var btn, iframe;    

var createBtn = function () {
  btn = document.createElement('button');
  ...
}

var createIframe = function () {
  iframe = document.createElement('iframe');
  ...
}

回调功能

var displayIframe = function(){
  iframe.style['display'] = 'block'
}

附加点击监听器

btn.addEventListener('click', displayIframe);

你的错误：

您应将btn和iframe声明为可供其他功能使用的全局变量
函数以{开头，以}而不是(，)
到目前为止，您的代码是正确的，没有任何错误，但您不会在页面上看到任何内容，因为您尚未将新创建的元素附加到body，为此，请尝试此功能< / LI>
```
function attachToBody(){
    document.body.appendChild(btn);
    document.body.appendChild(iframe);
}
```

Answer 2

在你的例子中，我不知道为什么你使用函数创建元素，但你必须有自己的观点。试试这个让我知道这对你有用吗。

//this is equivalent to:  var btn = document.createElement('button');
var btn = (function(){
  var btn = document.createElement('button');
  return btn;
})();

var iframe = (function{
   var iframe = document.createElement('iframe');
    return iframe;
})();

document.getElementById("parentId").appendChild(btn);
document.getElementById("parentId").appendChild(iframe);

btn.addEventListener('click', function(){
    iframe.style.display = "none";
});

Answer 3

var createBtn = function() {
  var btn = document.createElement('button')
  btn.setAttribute("id", "myButton");
  return btn;
}

var createIframe = function() {
  var iframe = document.createElement('iframe')
  iframe.setAttribute("id", "myFrame");
  return iframe;
}

document.body.appendChild(createBtn()); // Append button to body.
document.body.appendChild(createIframe()); // Append iFrame to body.

// Get Elements by Id.
var myButton = document.getElementById("myButton"); 
var myFrame = document.getElementById("myFrame");

// Add event listener.
myButton.addEventListener("click", function() {
  myFrame.style.display = "none", false);
}

使用js创建两个元素，然后在另一个函数中访问它们

3 个答案: