基于表单输入字段值的动态字段生成

时间:2019-01-09 10:54:42

标签: javascript

以html格式,我有一个字段作为主题数。我的问题是,如果我给定的值为4,则需要创建四个文本字段。每行取主题名称和标记的输入字段值。 请帮助我如何编写Java代码以根据输入值动态生成字段。

1 个答案:

答案 0 :(得分:0)

您提到Java,但标记了JavaScript问题。所以我假设您的意思是JavaScript。

也就是说,您可以按照DOM(https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)操作HTML,并使用.appendChild(https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)方法插入新的文本字段。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>

        <h1>Enter number of subjects:</h1>

        <input type="number" id="inputValue">

        <button type="button" id="submitInput">Submit</button>

        <br>
        <br>

        <form id="form">


        </form>

        <script src="test.js"></script>

    </body>
</html>

JavaScript:

const numberOfInputs = document.getElementById('submitInput');

numberOfInputs.onclick = function() {

    const inputValue = document.getElementById("inputValue").value;

    for (let i = 0; i < inputValue; i++) {

        document.getElementById("form").appendChild(document.createElement("input"));
    }
}