Создание двух элементов с помощью 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' 
} 

Attach нажмите слушателю

btn.addEventListener('click', displayIframe); 

Ваши ошибки:

1. вы должны объявить btn и iframe как глобальные переменные должны быть доступны для других функций
2. функция начинается с { и заканчивается } не (, )
3. до сих пор ваши коды правильно , без каких-либо ошибок, но вы не увидите ничего на странице, потому что вы не привязали свои вновь созданные элементы к body. Для этого попробуйте эту функцию

---

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