时间戳

首页 > 解决方案 > 在 Javascript 中通过标签名称获取信息

javascript - 在 Javascript 中通过标签名称获取信息

问题描述

我需要一种方法来捕获所有未知数量的文本字段并将它们保存为 JSON：我很擅长编码，但对 web 很陌生。这甚至是这样做的方法吗？谢谢！

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="myP">
        field
        <br />
    </div>
    <button onclick="addField()">add field</button>
    <button onclick="captureAllInfo()">Capture</button>
    <script>
        var whichdiv = 0;
      
        function addField() {
          whichdiv = whichdiv + 1;
          parentDocument = document.getElementById("myP");
      
          var mydiv = document.createElement("div");
          mydiv.id = whichdiv;
      
          var input1 = document.createElement("input");
          var label1 = document.createElement("label");
          label1.innerHTML = "input label 1 ";
          input1.id = "Info1";
      
          var input2 = document.createElement("input");
          var label2 = document.createElement("label");
          label2.innerHTML = "imput label 2";
          input2.id = "Info2";
      
          mydiv.appendChild(label1);
          mydiv.appendChild(input1);
          mydiv.appendChild(label2);
          mydiv.appendChild(input2);
      
          parentDocument.appendChild(mydiv);
        }
      
        function captureAllInfo() {
          for (var i = 0; i < whichdiv; i++) {
            console.log("loopin");
            var thisDiv = document.getElementById(i);
            console.log(thisDiv.getElementById("Info1").value);
          }
        }
      </script>
  </body>
</html>

我真正想做的是获取这两个输入，然后将它们添加到 JSON 对象，如 JSON STRUCTURE，如下所示：

{
  "1": 
      {input1 : "string",
       input2: "String"},
    "2": 
      {input1 : "string", 
       input2: "String"}
     "3"..., 
     "4"...
}

标签： javascripthtml

解决方案

请原谅我的函数格式错误。我在我的 fairphone2 上写了这个。这个想法是我用于className重复的标识符。另请注意，id应避免使用纯数字标签。

<html>
<div id="myP">
  field
  <br />
</div>
<button onclick="addField()">add field</button>
<button onclick="captureAllInfo()">Capture</button>
<script>
  var whichdiv = 0;

  function addField() {
    whichdiv = whichdiv + 1;
    parentDocument = document.getElementById("myP");

    var mydiv = document.createElement("div");
    mydiv.id = 'd'+whichdiv;
    mydiv.className='idiv';

    var input1 = document.createElement("input");
    var label1 = document.createElement("label");
    label1.innerHTML = "input label 1 ";
    input1.className = "Info1";

    var input2 = document.createElement("input");
    var label2 = document.createElement("label");
    label2.innerHTML = "input label 2";
    input2.className = "Info2";

    mydiv.appendChild(label1);
    mydiv.appendChild(input1);
    mydiv.appendChild(label2);
    mydiv.appendChild(input2);

    parentDocument.appendChild(mydiv);
  }
function qsa(s,o){return [...(o||document).querySelectorAll(s)]}
function captureAllInfo() {var o={};
  qsa('.idiv').forEach(d=>{
   var c=o[d.id.substr(1)]={};  
   qsa('input',d).forEach(t=>c[t.className]=t.value);
  });
 
  console.log(JSON.stringify(o));
  }
</script>

</html>

编辑：。qsa()我为各种“QuerySelectorAll”方法添加了快捷功能，以使所有内容更具可读性。qsa()返回一个数组而不是一个简单的节点列表。第二个参数qsa()是可选的。如果给定，它将是.querySelectorAll()为其调用方法的元素。它默认为document.

推荐阅读