Não está reconhecendo a função salvarEdicao()

Olá, pessoal!

Estou com dificuldades em encontrar a diferença entre o meu código e a do instrutor. Entendi que o problema é que a função salvarEdicao() não está sendo chamada corretamente.

Quando executo o código gera o seguinte erro:

Uncaught ReferenceError: salvarEdicao is not defined at HTMLButtonElement.onclick ((index):1:1)

listaDeItens.forEach((elemento, index) => {
        if(elemento.checar) {
            ulItensComprados.innerHTML += `
            <li class="item-compra is-flex is-justify-content-space-between" data-value="${index}">
                <div>
                    <input type="checkbox" checked class="is-clickable" />  
                    <span class="itens-comprados is-size-5">${elemento.valor}</span>
                </div>
                <div>
                    <i class="fa-solid fa-trash is-clickable deletar"></i>
                </div>
            </li>
            `;
        } else {
                ulItens.innerHTML += `
                <li class="item-compra is-flex is-justify-content-space-between" data-value="${index}">
                    <div>
                        <input type="checkbox" class="is-clickable" />
                        <input type="text" class="is-size-5" value="${elemento.valor}"></input>
                    </div>
                    <div>
                        <button onclick="salvarEdicao()"><i class="fa-regular fa-floppy-disk is-clickable"></i></button><i class="fa-regular is-clickable fa-pen-to-square editar"></i>
                        <i class="fa-solid fa-trash is-clickable deletar"></i>
                    </div>
                </li>
                `;
            }
        })

    function salvarEdicao() {
        const itemEditado = document.querySelector(`[data-value="${itemAEditar}"] input[type="text"]`); 
        console.log(itemEditado.value);
    }