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

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);

你的错误:

1. 您应该将 btn 和 iframe 声明为全局变量，以便其他函数可以访问
2. 函数以 { 开头，以 } 结尾，而不是 (, )
3. 到目前为止，您的代码是正确的，没有任何错误，但您在页面上看不到任何内容，因为您尚未将新创建的元素附加到body，要完成此操作，请尝试此功能

<小时/>

function attachToBody(){
    document.body.appendChild(btn);
    document.body.appendChild(iframe);
}