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;

}

这只是返回输入的随机值[name =＆＃34; input + x＆＃34;]

ps：所有平台都不支持document.querySelector，所以要确保只需添加一个getElementByAttribute函数即可在网络上随处可见

Answer 2

关于你的问题：由于onClick的使用，我的朋友们都在笑。是不是很糟糕？

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

从控制器层分离演示文稿。（HTML / JavaScript）。
因为你和伙伴的第一个原因，可维护性得到了提高。
更好的调试代码的方法。您不必检查多个文件，只需检查.js
根据this post，您无法在缓存中放入内联j，从而改善用户体验。

因此，请尽量避免使用内联攻击。

使用JavaScript迭代表单

2 个答案: