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

我有一个脚本，当在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代码只更改第一个表单的输入，即使滑块是从另一个表单激活的。简而言之，滑块应该以激活它的形式返回值；不仅以第一种形式添加。

---

谢谢大家!

根据我的评论，问题源于所有输出元素moto1的id值都相同。实际上，您已经获得了使它们唯一所需的所有变量，因为您正在跟踪计数器变量页面上的表单数。您可以使用它来代替当前的输出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 + "'>"

---

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

看起来您正在对每个滑块输出上的id moto1进行硬编码：。id必须是唯一的，否则选择器每次都会找到第一个具有该id的元素。在您的情况下，第一个moto1 id在您的第一个生成表单中谢谢！是否有一种解决方案可以在每次显示新表单时生成不同的ID？Math.random.toString 36.substring10。我从另一个关于堆栈溢出的问题中得到了这个结论。您需要根据浏览器的不同调整第二个数字，即6-8个字母/数字，即2-4等。谢谢！我有了这个想法，我正在努力让它发挥作用。但它仍然不起作用，我尝试了警报索引；检查它是否有效，但没有结果。通常情况下，拆分方法的结果应该是索引[0]=“moto”和索引[1]=计数器。如果拆分索引的演示会有所帮助，您可以查看Thank you@JonMichalik9，我使用您的代码作为新代码的灵感，它工作得非常好。再次感谢你。这里是：函数changeId{if counter==2{document.getElementByIdmoto1.id=id1；}if counter==3{document.getElementByIdmoto1.id=id2；}alert counter；}函数outputUpdate1vot{if counter==2{document.querySelector'id1'。innerHTML=vot；}else if counter==3{document.querySelector'id2'.innerHTML=vot；}}

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