使用JavaScript遍历表单

Question

我想从我可以填写姓名的表格中选择一个随机姓名。 我具有动态添加更多表单字段的功能。

到目前为止，这是我的代码：

    <form>
        <div id="dynamicInput">
            <input class="inputs" type="text" name="input1" placeholder='Type name' required>
            <input class="inputs" type="text" name="input2" placeholder='Type name' required>
            <input class="inputs" type="text" name="input3" placeholder='Type name' required>
            <input class="inputs" type="text" name="input4" placeholder='Type name' required>
        </div>
            <input type="button" class="login login-submit" value="Add a member" onClick="addInput('dynamicInput');">
            <input type="button" name="login" class="login login-submit" value="Roll the wheel!" onClick="rollIt();">
    </form>

我的Javascript函数如下：

function addInput(divName){

     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<input class='inputs' type='text' name='input" + counter + "' placeholder='Type name' >";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

function rollIt() {
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        console.log(inputs[i]);
    }
}

我有两个问题：

• 由于onClick的使用，我的朋友们都嘲笑我的脸。 那样不好吗？

• 我如何将表单值存储在列表中？ 我试图用rollIt函数向他们展示没有成功。

Answer 1

也许是这样的：

function randomName(){
    var inputs = document.getElementsByTagName('input');
    randomName = document.querySelector('[name="input'+(Math.floor(Math.random() * inputs.length) + 1)+'"  ]').value;
    return randomname;

}

这只是返回input [name =“ input + x”]的随机值

ps：并非所有平台都支持document.querySelector，因此请确保只需添加一个getElementByAttribute函数，您就可以在网络上随处可见

Answer 2

关于您的问题： 由于onClick的使用，我的朋友们都嘲笑我。 这样不好吗？

实际上，出于某些原因，不要将内联javascript更好：

• 表示层与控制器层分开。 （HTML / JavaScript）。
• 因此，由于您和队友的首要原因，可维护性得到了改善。
• 调试代码的更好方法。 您不必检查多个文件，只需检查.js
• 根据这篇文章 ，您不能将内联js放入缓存中，因此可以改善用户体验。

因此，请尝试避免使用那些内联onclick用法。