将DIV添加到body标签后设置DIV的内部html答案

【问题标题】：Setting inner html of a DIV after it is added to body tag将DIV添加到body标签后设置DIV的内部html
【发布时间】：2020-12-26 19:46:42
【问题描述】：

我正在 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 添加到正文标记之前。但我无法访问 Elementor 默认函数来编辑它们并说在弹出窗口发生后调用calenderchooser()。所以在这种情况下，我如何在弹出窗口出现后立即调用函数calenderchooser()。我还想到了类似 DIV 现有更改状态的事件侦听器（如果可用但一无所获）。

【问题讨论】：

calenderhtml = "<div class='calendly-inline-widget' data-url='https://calendly.com/lisa-557/30min-1' style='min-width:320px;width:100%;height:650px;'></div>";这不会创建一个 HTML 元素使用 'document.createElement("DIV");创建元素

标签： html wordpress event-handling dom-events elementor

【解决方案1】：

这对我有用 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>

【讨论】：