javascript捕获div中的每个值

Question

我有一个div，可在其中动态地通过javascript输入和文本进行渲染。我正在尝试捕获该div的文本（输入值和文本）。

如果要捕获父div，我的第一步是

let answerWrapper = document.getElementById("typing-answer-wrapper");

现在的问题是，使用innerHTML将给我带有给定标签的整个html字符串，而使用inerText将给我文本（不包括标签）。

在以下情况下：

控制台检查是：

捕获的方式是：如果输入有2和4，则为$ 2.4 和$ null.null（如果输入为空白）。

欢迎任何帮助

Answer 1

这是您的方法：

function getValue() {
  var parent = document.getElementsByClassName('typing-answer-wrapper')[0],
    text = [];
  const children = [...parent.getElementsByTagName('input')];
  children.forEach((child) => {
    if (child.value == '')
      text.push("null")
    else
      text.push(child.value)
  });
  if (text[0] != "null" && text[1] == "null") text[1] = "00";
  document.getElementById('value').innerHTML = "$" + text[0] + "." + text[1]
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="typing-answer-wrapper">
  $
  <input type="number"> .
  <input type="number">
</div>

<button onclick="getValue()">get value</button>

<div id="value"></div>

Answer 2

您可以遍历元素的所有子节点，并将它们的wholeText或value串联，否则为'null'。对于输入wholeText是不确定的。如果它们没有值，我们将返回“ null”。请注意，空格和换行符也将包括在内，因此您可能希望稍后删除它们（或在循环中跳过它们），但作为概念验证，请参见以下示例：

var typingAnswerWrapper = document.getElementById("typing-answer-wrapper");
function getVal(){ 
  var nodeList = typingAnswerWrapper.childNodes;
  var str = "";
  for (var i = 0; i < nodeList.length; i++) {
    var item = nodeList[i];
    str+=(item.wholeText || item.value || "null");
  }
  console.log(str);
}
getVal();
//added a delegated change event for demo purposes:
typingAnswerWrapper.addEventListener('change', function(e){
  if(e.target.matches("input")){
    getVal();
  }
});

<div id="typing-answer-wrapper">$<input type="number" value=""/>.<input type="number" value="" />
</div>

Answer 3

您可以按各自的ID提取输入的字段值$('#input_feild_1').val()将给出第一个字段值，类似地$('#input_feild_2').val()则给出第二个字段，并构造它们以构造您想要的任何值。就像你的情况一样 值_1 = $('#input_feild_1_id').val() value_2 = $('#input_feild_2_id').val()

您需要类似"$ + value_1 + . + value_2"