Programmatically edit modal button actions

Question

I am creating a button programmatically that once clicked, will call a modal, however, I would like as soon as they press the button inside the modal, the page restart and close this modal. How I do the implementation?
every time I put one on. onClick = 'window.location.Reload' with the id of the modal button to re-stream the page as soon as you press the MODAL button, this action is triggered before you even get to this part, because this as action of the button that drives the modal, and not as action of the modal button itself.

--------------------------------------------------------- TOP HTML ----------------------------------------------------------------------------------------

    <!-- Modal 1 -->
  <div class="modal fade" id="registraDespesa" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div id="modal_titulo_div">
        <h5 class="modal-title" id="modal_titulo">Erro na gravação</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modal_conteudo"></div>
      <div class="modal-footer">
        <button type="button" id="modal_botao" data-dismiss="modal"> Voltar e corrigir </button>
      </div>
    </div>
  </div>
</div> <!-- Fim modal 1 -->

------------------------------------------------------- HTML END --------------------------------------------------------------------------------------------------

let btn = document.createElement('button')
        btn.className = 'btn btn-danger' // Colocando uma classe na tag
        btn.innerHTML = '<i class="fas fa-times"></i>' // Colocando um elemento dentro da tag
        btn.id = 'id_despesa'+d.id // Pegando o id criado dentro do objeto despesa
        btn.onclick = function() {
            let id = this.id.replace('id_despesa','') // Retirando o id_despesa
            bd.remover(id)
            
        // Editando o modal que sera exibido 
        document.getElementById('modal_titulo').innerHTML= 'Erro!'
        document.getElementById('modal_titulo_div').className = 'modal-header text-danger'
        document.getElementById('modal_conteudo').innerHTML = 'Erro na gravação. Verifique se todos os campos foram preenchidos.'
        document.getElementById('modal_botao').innerHTML = 'V'
        
        // A grande duvida logo aqui
        document.getElementById('modal_botao').onclick = window.location.reload() // O onclick esta referenciando o botão que chama o modal, não o botão do proprio modal
        
        document.getElementById('modal_botao').className = 'btn btn-danger'
        $('#registraDespesa').modal('show')
        }

Answer 1

Whenever a function name is used followed by (), it will be invoked, running what is set in your body. In this case you are not sharing the behavior of the native function location.reload, but calling it whenever your code is executed in the browser. Assign a function to the property onclick in this way:

document.getElementById('modal_botao').onclick = function() { window.location.reload() }