Question

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

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

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

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

和＆＃34; Form＆＃34;加载：

<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

您正在尝试在加载动态内容之前绑定事件处理程序，因此在执行{{1}期间不会找到def count_e(input) input.to_s.count("e") end def check_for_e(input) count = count_e(input) count > 0 ? count.to_s : "There's no \"e\"." end check_for_e("Covfefe") # => "2" check_for_e("Bnjamin") # => "There's no \"e\"." check_for_e(nil) # => "There's no \"e\"." check_for_e("") # => "There's no \"e\"."，num1和num2元素}循环（其他元素也是如此）。

相反，使用事件委派原则：num3事件会冒出来，所以虽然触发for元素尚未出现，但您已经可以收听change事件了在文件上。稍后将input添加到文档中并生成change事件时，事件处理程序将捕获该事件，因为它会在DOM层次结构中冒泡。

您可以使用这些代码来代替input循环：

change

一旦注入了动态内容，您也可以调用 calculate 函数：

for

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

1 个答案: