Question

我有一个添加textarea的按钮，但是如何从文本区域中检索值。我尝试过使用

document.getElementById('newutterances').value;

但它不起作用。

请帮忙，因为我不熟悉JavaScript。

＆＃13;

<html>
    <body>
    <div id="newutterance"></div>
    <input type="button" value="Add Text Area" onClick="addTextArea();">
    <button type="button" onClick="getValue()">Get Value</button>
    
     <script type="text/javascript">
    			function addTextArea() 
    			{
    			var intTextBox = 0;
    			intTextBox++;
    			var objNewDiv = document.createElement('div');
    			objNewDiv.setAttribute('id', 'div_' + intTextBox);
    			objNewDiv.innerHTML = 'Textbox ' + intTextBox + ': <input type="text" id="tb_' + intTextBox + '" name="tb_"/>';
    			document.getElementById('newutterance').appendChild(objNewDiv);
    			  
    			}
        </script>
         <script type="text/javascript">
    			function getValue() 
    			{
    			var value = document.getElementById('newutterance');
          return value;
    			}
        </script>
    </body>
    </html>

＆＃13;

Answer 1

为字段添加一些类并使用document.getElementsByClass();

<script type="text/javascript">
    var count = 0;
    function addTextArea() {
        count++;
        var objNewDiv = document.createElement('div');
        objNewDiv.innerHTML = 'Textbox ' + count + ': <input type="text" class="field" name="tb_"/>';
        document.getElementById('newutterance').appendChild(objNewDiv);
    }
    function getValue() {
        var fields = document.getElementsByClassName('field');
        var values = [];
        for (var i = 0; i < fields.length; i++) {
            values.push(fields[i].value);
        }
        return values;
    }
</script>

Answer 2

使用下面的代码片段，我获取您创建的输入字段的值，并使用console.log（）打印它。

var button = document.querySelector('button');

button.addEventListener('click', function() {
     var input = document.querySelector('#newutterance input[type="text"]');
     var inputValue = input.value; 
     console.log(inputValue);
});

<html>

<body>
  <div id="newutterance"></div>
  <input type="button" value="Add Text Area" onClick="addTextArea();">
  <button type="button">Get Value</button>

  <script type="text/javascript">
    function addTextArea() {
      var intTextBox = 0;
      intTextBox++;
      var objNewDiv = document.createElement('div');
      objNewDiv.setAttribute('id', 'div_' + intTextBox);
      objNewDiv.innerHTML = 'Textbox ' + intTextBox + ': <input type="text" id="tb_' + intTextBox + '" name="tb_"/>';
      document.getElementById('newutterance').appendChild(objNewDiv);

    }
    var button = document.querySelector('button');

    button.addEventListener('click', function() {
      var input = document.querySelector('#newutterance input[type="text"]');
      var inputValue = input.value;
      console.log(inputValue);
    });
  </script>
</body>

</html>

如何获取动态生成的文本框的输入值？

2 个答案: