使用 Javascript 创建的表单的 Javascript 函数

Question

我有一个脚本，当一个按钮被点击到一个 HTML 页面时，它会添加一个新表单，代码如下：

    <script>
var counter = 1;
var limit = 10;
function addInput(divName){
     if (counter == limit)  {
          alert("Max number of forms, " + counter );
     }
     else 
    {
          var newdiv = document.createElement('div'); 
        newdiv.innerHTML = "<form name='frmMain' action='prelucrare.php' method='POST'><div class='slot' id='dynamicInput' align='center'> Masina " + (counter +1 ) + "<table border='1'><tr><td align='right'><label for='marca'>Marca:</label></td><td colspan='2' align='left'>"
        + "<select id='marc' name='marc'><option selected value=''></option>"
    + "<tr><td align='right'><label for='motorizare1'> Motorizare:</label></td> <td><input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id=motor1 oninput='outputUpdate1(value)'></td><td><output for=motorizare1 id=moto1>2</output></td></tr>"
        + "</div></form>"               
        ;
        }
          document.getElementById(divName).appendChild(newdiv);
          counter++; 
                                                } 
    </script>
    <input type="button" value="Adauga" onClick="addInput('dynamicInput');">

我有下面的脚本，它改变了滑块的值。

<script>
    function outputUpdate1(mot1) {
                                document.querySelector('#moto1').innerHTML = mot1;
                                                }         
    </script>

我的问题是 JS 代码只更改第一个表单的输入，即使滑块是从另一个表单激活的。 简而言之，滑块应该以激活它的形式返回值；不仅在第一种形式中添加。 谢谢！

Answer 1

根据我的评论，问题源于所有输出元素的 id 值相同 (moto1)。由于您正在跟踪页面上表单的数量（您的 counter 变量），因此您实际上已经获得了使它们唯一所需的所有变量。您可以使用它来代替当前的输出 HTML：

    "<input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id='motor_" + counter + "' oninput='outputUpdate1(value)'/>"
    "<output for=motorizare1 id='moto_" + counter + "'>"

您可以更新您的函数以解析出您想要更新的输出的正确索引，因为如果您使用上面的 HTML，它们应该是同步的：

function outputUpdate1(mot) {
    // Get the counter part of the range element's id
    var index = mot.id.split('_')[1];
    document.querySelector('#moto_' + index).innerHTML = mot;
}    

您可能需要对问题中未提供的代码进行一些调整，但这是使 id 值唯一以及如何在不提前知道确切 id 的情况下访问它们的一种方法。