Консоль выводит ошибку о несуществующей функции, хотя я написал ее

Question

Для удаления заметок в своем приложении я поставил svg-иконку, имеющая атрибут onclick = "delete_note();"

Но выводится ошибка:

ReferenceError: delete_note is not defined
at HTMLUnknownElement.onclick

Весьма странно, ведь я создал функцию с данным названием

function add_note(){
        section = document.getElementById("all_notes");
        var textarea = document.querySelector('textarea'); 
        var date = document.querySelector('input');
        
        save_note = document.createElement("div");
        save_note.className = "note";
        section.appendChild(save_note);
        
        var text_of_note = document.createElement("div");
        text_of_note.className = "text_of_note";
        
        var date_of_note = document.createElement("p");
        date_of_note.className = "date_of_note";

        var text_for_text_of_note = document.createTextNode(textarea.value);           
        text_of_note.appendChild(text_for_text_of_note);
        
        var date_for_date_of_note = document.createTextNode(date.value);
        date_of_note.appendChild(date_for_date_of_note);

        function delete_note(){
            section.removeChild(note);
        }
        
        var delete_icon = document.createElement("svg");
        delete_icon.className = "delete_icon";
        delete_icon.setAttribute("onclick", "delete_note();");

        save_note.appendChild(text_of_note);
        save_note.appendChild(date_of_note);
        text_of_note.appendChild(delete_icon);
    }

Полный HTML(в section c id=all_notes я скидываю все добавленное)

<body>
<div class="header_of_page">
    <div class="title_page">Заметки и Напоминания</div>
    <div class="subtitle">Создавай новые идеи и ставь новые задачи</div>
</div>
<section class="create_note">
    <div class="box">
        <p class="input_intro">Ввод текста</p>
        <textarea></textarea>
        <p class="input_intro">Добавление даты</p>
        <input type="date">
        <div class="buttons">  
            <div class="add-btn" onclick="add_note();">Добавить Заметку</div>
            <div class="clear-btn">Очистить все</div>
        </div>
    </div>
</section>
<section class="notes_lists" id="all_notes">
</section>

Answer 1

Предлагаю другое решение проблемы. Если хочется использовать функцию в функции. Возможно решит:

delete_icon.addEventListener('click', () => { delete_note(); });
//delete_icon.setAttribute("onclick", "delete_note;");

Answer 2

Вижу, вы не понимаете область видимости. Если просто, "то, что находится в фигурных скобках, видно только внутри этих фигурных скобок". Ваша функция delete_note объявляется внутри функции add_note. Поэтому вашу delete_note не видно снаружи. Ваш html и тег script находимся в глобальной области видимости (ваша страница). Просто объявите delete_note снаружи add_note. Если вам нужно чтобы у этих функций были общие переменные, их тоже вынесите в глобальную область, например вот так:

let lastNote = null; 
let section = $('#all_notes')
function add_note(){
    lastNote = someValue;
    …
}

function delete_note(){
    section.removeChild(lastNote); 
    …
}

Если совсем не хотите менять существующий код, занесите delete_note в window:

window.delete_note = function delete_note(){…}

БЛОГ НА HUSL

Консоль выводит ошибку о несуществующей функции, хотя я написал ее

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