Как переменную создаваемую через createElement вывести в глобальную область видимости?

Question

[Yuber70 Roshe]

Добрый день.
Есть такой код: https://github.com/yuberroshe/my-project/APP3

window.addEventListener('DOMContentLoaded', function() {

    let box = document.querySelector('.box');
 
    let btn2 = document.querySelector('.btn2');
    let box2 = document.querySelector('.box2');
    let btn = document.querySelector('.btn');
    let inpStart = document.querySelector('.inpstart ');
    let inp1 = inpStart.querySelector('.input1 ');
    let inpStart2 = document.querySelector('.inpstart2 ');
    let inp2 = inpStart2.querySelector('.input2 ');
    let div1;

    btn2.onclick = function() {
        inpStart2.classList.remove('hide')
        inpStart2.classList.add('show')
        inpStart.classList.remove('hide')
        inpStart.classList.add('show')
        this.classList.add('hide')
    }

    function local() {

        localStorage.setItem('page', box.innerHTML)
    }


    btn.addEventListener('click', f1)

    function f1() {

         div1 = document.createElement('div')
        div1.classList.add("block");
        div1.style.background = randColor();

        let link = document.createElement('a')
        link.href = inp1.value
        link.target = '_blank'
        inp1.value = ''

        let p = document.createElement('p')
        p.innerHTML = inp2.value

        let one = document.createElement('div')
        one.classList.add('one')
        one.innerHTML = '*'
        inp2.value = ''

        link.appendChild(p)
        div1.appendChild(link)
        div1.appendChild(one)

        box.appendChild(div1)


        inpStart.classList.remove('show')
        inpStart.classList.add('hide')

        inpStart2.classList.remove('show')
        inpStart2.classList.add('hide')

        btn2.classList.remove('hide')
        btn2.classList.add('show')


        local()
    }


    if (localStorage.getItem('page')) {

        box.innerHTML = localStorage.getItem('page')

    }


    div1.addEventListener('click', function(event) {
        let target = event.target
        if (target && target.classList.contains('one')) {

           this.classList.add('delete')

            local()

        }
    })

    function randColor() {
        var r = Math.floor(Math.random() * (256)),
            g = Math.floor(Math.random() * (256)),
            b = Math.floor(Math.random() * (256));
        return '#' + r.toString(16) + g.toString(16) + b.toString(16);

    }


})

Как переменную div1 создаваемую через createElement вывести в глобальную область видимости?
Чтобы функция

div1.addEventListener('click', function(event) {
let target = event.target
if (target && target.classList.contains('one')) {

this.classList.add('delete')

local()

} срабатывала, не выдавала Cannot read property 'addEventListener' of undefined
Спасибо.
P.S Я отредактировал вопрос. Всем ,кто ответил до внесения изменений в текст , спасибо.

Comments

[Сергей Соколов]

тут стереть слово let и пробел после него? : )
let div1 = document.createElement('div')

[Yuber70 Roshe]

Все так. Но контексте кода не работает. Спасибо.

Answer 1

[Тигран Абрамян]

div1 = document.createElement('div')
var div1 = document.createElement('div')
window.div1 = document.createElement('div')

Comments

[Yuber70 Roshe]

Все так. Но контексте кода не работает. Спасибо.

[Тигран Абрамян]

Yuber70 Roshe, после этого

div1 = document.createElement('div')
div1.classList.add("block");
div1.style.background = randColor();

вы хотите чтобы этот клик сработал?
div1.addEventListener('click', function(event) {

вы же там добавили класс, вот и обращайтесь через него

document.querySelector('.block').addEventListener('click', function(event) {

или

document.querySelector('body').addEventListener('click', '.block', function(event) {

или

document.addEventListener('click', function(event) {
  if (event.target.closest('.block')) {
    // ...
  }
}

[Yuber70 Roshe]

Спасибо. Благодаря вашей помощи мне удалось решить проблему. Спасибо.
Вот само решение:
document.querySelectorAll(.block').forEach(item=>{
item.addEventListener('click', function(event) {
let target = event.target
if (target && target.classList.contains('one')) {

item.classList.add('delete')
}

local()

})
})