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

Question

I am attempting to create an application with dynamic forms. I would like on-screen calculations for these forms but I am struggling. I can get the JS to work when it is a static webpage and now I'm attempting to get that logic working for a dynamic page.

I believe what I am after is for the on-screen calculations JS function only to be called after the form has been created. However, I may just not understand the basis of HTML / JS - I'll let you decide that...

The original page that when the drop down is changed the "form" is created (Basically - On drop down change, load Page2.php into div "ForecastForm", then using the input boxes & divs in Page2.php, the 2nd JS function aims to provide on-screen calculations):

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

and the "Form" that gets loaded:

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

Any help or advice would be greatly appreciated. Thank you.

Answer 1

You are trying to bind event handlers before the dynamic content is loaded, so no num1 , num2 , nor num3 elements will be found during the execution of your for loop (the same happens for the other elements).

Instead, use the principle of event delegation: the change event will bubble up, so although the triggering input element is not yet there, you can already listen to the change event on the document. When later the input is added to the document, and generates the change event, your event handler will capture that event as it bubbles up the DOM hierarchy.

Instead of your for loop, you could use code along these lines:

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

You could also call the calculate function as soon as the dynamic content has been injected:

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