打印所有输入中的文字

时间:2016-12-23 00:19:47

标签: javascript html

我需要打印div中输入的所有文本" readyorder"。因此,它打印其中的一些但我需要打印输入后的文本,这些输入在我点击" AddAuthor"后出现。所以当我点击" AddAuthor"接下来的三个输入显示出来,我需要在与其他信息相同的div中打印它们。它必须发生在所有出现的输入上。我能请求帮助吗?



<!DOCTYPE html>
<html>


<body>

    <input type="text" name="file-1" />
    <input type="text" name="surname-1" />
    <input type="submit" value="Add author" id="add_input" />

    <form name="add_file" enctype="multipart/form-data" method="post">
    </form>

    <hr>

    <div id="readyorder"></div>
    <br />

    <script type="text/javascript">
        window.onload = Load;
        var number = 0;

        function Load() {
            document.getElementById('add_input').onclick = AddElement;
        }

        function AddElement() {
            var element1 = document.createElement('input');
            var element2 = document.createElement('input');
            var element3 = document.createElement('input');
            var label1 = document.createElement('label');
            var label2 = document.createElement('label');
            var label3 = document.createElement('label');
            var button = document.createElement('input');

            label1.innerHTML = "<br />Author's Name " + number + "<br />";

            element1.setAttribute('type', 'text');
            element1.setAttribute('id', 'name' + number);
            element1.setAttribute('placeholder', 'Name...');
            label1.appendChild(element1);

            label2.innerHTML = '<br /> Initial ' + number + '<br />';

            element2.setAttribute('type', 'text');
            element2.setAttribute('id', 'initial' + number);
            element2.setAttribute('placeholder', 'Initial...');
            label2.appendChild(element2);

            label3.innerHTML = '<br />Surname ' + number + '<br />';

            element3.setAttribute('type', 'text');
            element3.setAttribute('id', 'surname' + number);
            element3.setAttribute('placeholder', 'surname...');
            label3.appendChild(element3);

            button.setAttribute('onclick', 'getText(' + number + ')');
            button.setAttribute('type', 'button');
            button.setAttribute('value', 'Button ' + number);

            document.forms['add_file'].appendChild(label1);
            document.forms['add_file'].appendChild(label2);
            document.forms['add_file'].appendChild(label3);
            document.forms['add_file'].appendChild(button);
            number++;
        }

        function getText(id) {
            var name = document.getElementById("name" + id);
            var initial = document.getElementById("initial" + id);
            var surname = document.getElementById("surname" + id);
            var div = document.getElementById("readyorder")

            var wydawnictwo = document.getElementById("title");
            var rokwydania = document.getElementById("otherinfo");
            var div = document.getElementById("readyorder")
            div.innerHTML = "(" + "," + " " + "s." + " " + page.value + ")" + "(" + name.value + " " + initial.value + "," + " " + "s." + " " + surname.value + ")" + year.value;
        }
    </script>
</body>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

 Array.from(document.querySelectorAll('input[type=text]')).forEach(input =>
   console.log(`INPUT of name ${input.name} has value = ${input.value}.`)
 )

这样,您将打印页面中存在的所有文本输入

Array.from(document.querySelectorAll('input[type=text]')).forEach(input =>
       console.log(`INPUT of name ${input.name} has value = ${input.value}.`)
     )
<input type="text" name="firstname" value="Agg" />
<input type="text" name="lastname" value="Garg" />