元素函数 appendchild 为空错误

Question

我目前正在尝试创建一个函数来创建一个表单，该表单有一个提交按钮，默认情况下是隐藏的，直到被另一个按钮触发。我的按钮当前按我的意愿弹出表单，但在表单中我的添加按钮不存在，我也无法实际添加到表单，因为它说 appendChild 为空。但是检查服务器和查询都表明找到了值。下面是我的错误，一个特定的片段，最后是我正在呈现的表单。

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

首先你必须从 buttonDiv 常量中获取日志（console.log() 方法）如果不为空，则更改

 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))
     }

我认为可以

Answer 2

我通常不推荐这样做，但可能在某处异步脚本未按预期顺序运行，或者脚本标签未按预期顺序加载。无论哪种方式，您正在调用的函数都会在 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 是 "buttons"，el 将是您附加 getAndFormatNewReviewForm 的任何内容。将 "click" 更改为您想要的任何事件。

请注意，这是一个简单的磁带解决方案，您还需要设计脚本以在必要时终止。

元素函数 appendchild 为空错误

element function appendchild is null error

javascript

forms

rendering

function