仅在创建第一个Javascript函数中创建的表单之后，才调用第二个Javascript函数

Question

我试图用动态表格创建一个应用程序。 我想在屏幕上计算这些表格，但是我很挣扎。 当它是静态网页时，我可以使JS工作，现在我试图使该逻辑适用于动态页面。

我相信我所追求的是仅在创建表单后才调用屏幕计算JS函数。 但是，我可能只是不了解HTML / JS的基础-我会让您决定...

更改下拉菜单时将创建“表单”的原始页面（基本上-在下拉菜单中，将Page2.php加载到div“ ForecastForm”中，然后使用第二个JS函数Page2.php中的输入框和divs旨在提供屏幕计算）：

<div>Top</div>
<br></br>
<script>
function GetForm(str) {
if (str == "") {
    document.getElementById("ForecastForm").innerHTML = "";
    return;
} else { 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("ForecastForm").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET","Page2.php?text="+str,true);
    xmlhttp.send();
}
}
</script>

<select id="SiteDD" onchange="GetForm(this.value)">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div id="ForecastForm"><b></b></div>

<script type="text/javascript">
for(var x=1; x<3; x++){

let num = "num"+x;
let input = "input"+x;
let total = "total"+x;
let element = "element"+x;
let inputelement = "inputelement"+x;
let thesum = "thesum"+x;

element = document.getElementById(num),
inputelement = document.getElementById(input),
thesum = document.getElementById(total);
document.getElementById(input).onchange = function() {
thesum.innerHTML = parseInt(element.innerHTML) + parseInt(inputelement.value);
};
};
</script>

<br></br>

<div>Bottom</div>

和加载的“表格”：

<div id="num1">11</div>

<input type=number value=2 id="input1">

<div id="total1">0</div>

<br>
<br>

<div id="num2">11</div>

<input type=number value=2 id="input2">

<div id="total2">0</div>

任何帮助或建议，将不胜感激。 谢谢。

Answer 1

您正在尝试在加载动态内容之前绑定事件处理程序，因此在执行for循环期间不会找到num1 ， num2和num3元素（其他元素也是如此）。

而是使用事件委托的原理： change事件将冒泡，因此尽管触发input元素尚不存在，但您已经可以在文档上侦听change事件。 当稍后将input添加到文档中并生成change事件时，事件处理程序会在DOM层次结构冒泡时捕获该事件。

除了使用for循环外，还可以使用以下代码：

function calculate() {
    document.getElementById('total' + SiteDD.value).textContent =
        +document.getElementById('num' + SiteDD.value).textContent +
        +document.getElementById('input' + SiteDD.value).value;
}

document.onchange = function(e) {
    // Check if this event was triggered from the input element we want to
    // listen to. If so, call the calculate function:
    if (e.target.id === 'input' + SiteDD.value) calculate();
};

您还可以在注入动态内容后立即调用calculate函数：

    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            ForecastForm.innerHTML = this.responseText;
            calculate(); // <---
        }
    };