функция элемента appendchild - это нулевая ошибка

Question

В настоящее время я пытаюсь создать функцию, которая создает форму, имеет кнопку отправки и по умолчанию скрыта, пока не сработает с другой кнопкой. Моя кнопка в настоящее время выдает форму, как мне хотелось бы, но внутри формы моя кнопка добавления отсутствует, и я также не могу добавить ее в форму из-за того, что appendChild имеет значение null. Но проверка сервера и запроса все предполагают, что значение было найдено. Ниже моя ошибка в указанном фрагменте c и, наконец, в форме, которую я отображаю.

getAndFormatNewReviewForm(event) {
       event.preventDefault();
       const newReviewForm = document.getElementById('new-review-form')   
       const submitButton = document.createElement("button") 
       submitButton.innerHTML = "Add"
       submitButton.id = "review-submit"
       submitButton.type = "submit"
       const buttonDiv = document.getElementById("buttons")
       buttonDiv.appendChild(submitButton)
       submitButton.addEventListener('click', this.submitReviewInputs.bind(this))
     } 

Answer 1

Обычно я не рекомендую этого, но, вероятно, где-то вдоль строки либо сценарии asyn c не выполняются в заданной последовательности, либо теги сценариев не загружаются в заданной последовательности. В любом случае, вызываемая вами функция вызывается до того, как элемент div станет доступен. Один из способов - опросить в течение разумного периода времени и затем выполнить вашу функцию, как только элемент станет доступен. Например:

function getButton(){
    let poll = (res)=>{
            let div = document.getElementById("buttons");
            if (div) {
                res(div);
            } else {
                window.requestAnimationFrame(function(){poll(res);});
            }
        };
    return new Promise(function(res){poll(res);})
}

Чтобы использовать

 getButton()
    .then(function(div){ 
          el.addEvenlistener("click",getAndFormatNewReviewForm,false);
    })

div, это "кнопки", el будет тем, к чему вы прикрепили getAndFormatNewReviewForm. Измените «щелчок» на любое событие, которое вы хотите.

Имейте в виду, что это решение для утиной ленты, вам также необходимо разработать сценарий для завершения при необходимости.

Answer 2

сначала вы должны получить журнал (метод console.log ()) из константы buttonDiv, если не ноль, изменить

 getAndFormatNewReviewForm(event) {
       event.preventDefault();
       const newReviewForm = document.getElementById('new-review-form')   
       const submitButton = document.createElement("button") 
       submitButton.innerHTML = "Add"
       submitButton.id = "review-submit"
       submitButton.type = "submit"
       const buttonDiv = document.getElementById("buttons")
       buttonDiv.appendChild(submitButton)
       submitButton.addEventListener('click', this.submitReviewInputs.bind(this))
     } 

на

 getAndFormatNewReviewForm(event) {
       event.preventDefault();
       var newReviewForm = document.getElementById('new-review-form')   
       var submitButton = document.createElement("button") 
       submitButton.innerHTML = "Add"
       submitButton.id = "review-submit"
       submitButton.type = "submit"
       var buttonDiv = document.getElementById("buttons")
       buttonDiv.appendChild(submitButton)
       submitButton.addEventListener('click', this.submitReviewInputs.bind(this))
     } 

я думаю, что будет работать