Добавление скрипта к DOM. Native JS

Question

Сделал инпут, который принимает номер урока и подключает соответствующий файл при нажатии button. Файл подключается, все хорошо, но при подключении следующего файла, у меня добавляется еще один файл дополнительно. Но мне надо сделать так, чтобы предыдущий файл удалялся и добавлялся новый.

В Playcode DOM не обновляется

Как мне при нажатии button сделать так, чтобы старый блок script удалялся и добавлялся новый?

Playcode

Answer 1

// Получение номера урока
function choseLesson(numberOfLesson){
    let linkLesson = ''
    let lessons = [
                    'let-const',
                    'arrow-functions',
                    'default-params',
                    'strings',
                    'rest_spread',
                    'objects',
                    'classes',
                    'symbols',
                    'generators',
                    'promises',
                    'map_set',
                    'reflect',
                    'proxy',
                ]
    for(let i = 1; i <= lessons.length; i++){
        linkLesson = `assets/${numberOfLesson}-${lessons[numberOfLesson-1]}.js`
    }
  console.log(linkLesson)
    return linkLesson
}
// Получение кнопки
let sendButton = document.querySelector('.sendButton')
sendButton.addEventListener('click', () => {
    // Блок Input
    let enteredNumber = document.querySelector('#enteredNumber')
    if(enteredNumber.value !== ''){
        //Если input не пустой, то добавь script к body с атрибутом src
        Array.from(document.getElementsByTagName('script')).forEach(tag=> tag.remove())
        let addScriptToBody = document.createElement('script')
        addScriptToBody.setAttribute('src', choseLesson(enteredNumber.value))
        document.body.append(addScriptToBody)
        enteredNumber.style.border = '1px solid #000'
    } else{
        enteredNumber.style.border = '1px solid #f00'
    }
})

Array.from(document.getElementsByTagName('script')).forEach(tag=> tag.remove())

Находит все тэги скрипт, но так как у document.getElementsByTagName('script') нет метода forEach мы его преобразуем в массив, его итерирует и все тэги удаляем

БЛОГ НА HUSL

Добавление скрипта к DOM. Native JS

Ответы (1 шт):