将DIV添加到body标签后，设置其内部html

问题描述

我正在wordpress上Elementor上的表单小部件上工作，当用户提交表单的提交按钮时，它将显示一个由elementor创建的弹出窗口。弹出窗口实际上是一个DIV标签，其中包括我在HTML小部件中写到弹出窗口中的HTML代码，如下所示，当用户按下时，该DIV将通过某些Elementor函数动态添加到页面的body标签中提交按钮。

<div id="calenderchooser01" style="min-height:100px;"></div>

<script>
function calenderchooser(){
    var calenderhtml="";
    var numofunits = document.getElementById("form-field-field_numberunits");
    if(numofunits.value>=15){
        calenderhtml = "<div class='calendly-inline-widget'  style='min-width:320px;width:100%;height:650px;'>over 15</div>";
    }else if(numofunits.value<15){
        calenderhtml = "<div class='calendly-inline-widget'  style='min-width:320px;width:100%;height:650px;'>less than 15</div>";
    }
    document.getElementById("calenderchooser01").innerHTML = calenderhtml;
    console.log(calenderhtml);
}
document.getElementById("thisisanidcustom").addEventListener("click",calenderchooser
);
</script>

thisisanidcustom是提交按钮表单的ID。另外，我通过将弹出窗口的显示分配给普通按钮进行了测试。 在两种情况下，当我按下按钮时，Chrome控制台上都会显示错误：

Uncaught TypeError: Cannot set property 'innerHTML' of null  

at HTMLAnchorElement.calenderchooser (9a48896437a750ba11b18d8323f96ea7.js:59)

它引用了这一行：

document.getElementById("calenderchooser01").innerHTML = calenderhtml;

，我认为它说div#calenderchooser01不存在。 我认为功能调用可能发生在将DIV添加到body标签之前。但是我无法访问Elementor的默认函数来对其进行编辑，并且说弹出窗口出现后请致电calenderchooser()。因此在这种情况下，如何在弹出窗口显示后立即调用函数calenderchooser()。我还想到了类似DIV现有更改状态的事件侦听器（如果可用），但未找到任何内容。

解决方法

这对我有用window.setTimeout（）方法：

<div id="over15" class='calendly-inline-widget'  style='min-width:320px;width:100%;height:650px;display:none'>over 15</div>
<div id="less15" class='calendly-inline-widget'  style='min-width:320px;width:100%;height:650px;display:none'>less than 15</div>

<script>
function functionCall(){
    setTimeout(calenderchooser,100);
}
function calenderchooser(){
    
    var numofunits = document.getElementById("form-field-field_numberunits");
    if(numofunits.value>=15){
        document.getElementById("over15").style.display = "block";
        console.log("over15");
    }else if(numofunits.value<15){
         document.getElementById("less15").style.display = "block";  
         console.log("less15");
    }


}
document.getElementById("thisisanidcustom").addEventListener("click",functionCall
);
</script>