无法从 div 获取数据

Question

我从 div 标签获取数据时遇到问题。这是我的 div<div id="log">        <div class="form-group" style="border-bottom:1px solid black;">            <div class="form-group">                <label class="col-sm-2 control-label"> Log Name <sup style="color:red">(*)</sup></label>                <div class="col-sm-2">                    <input type="text" class="form-control text banner_value" id="banner_value" />                    <div class="help-block with-errors"></div>                </div>                <label class="col-sm-2 control-label"> Start Day <sup style="color:red">(*)</sup></label>                <div class="col-sm-2">                    <input type="date" class="form-control text" id="start_day" />                    <div class="help-block with-errors"></div>                </div>                <label class="col-sm-2 control-label"> End Day <sup style="color:red">(*)</sup></label>                <div class="col-sm-2">                    <input type="date" class="form-control text" id="end_day" />                    <div class="help-block with-errors"></div>                </div>            </div>            <div class="form-group">                <label class="col-sm-2 control-label"> Filter Condition <sup style="color:red">(*)</sup></label>            </div>            <div id="banner_input" class="form-group">                <label class="col-sm-2 control-label"> Banner </label>                <div class="col-sm-3">                    <input type="text" class="form-control text" id="banner_value" />                    <div class="help-block with-errors"></div>                </div>                <div class="col-sm-3">                    <input type="checkbox" class="control-label" id="banner_split"> <lable> split </lable><br>                </div>            </div>它在浏览器上：在我点击添加后：我document.getElementById("log").textContent用来获取填充到这个 div 的数据，但它没有用。我怎样才能得到我的数据？？？请帮忙。感谢您阅读我的问题。

Answer 1

 function getValues() {

    var inputs = document.getElementById("log").getElementsByTagName("input");

    var values = [];

    for (i in inputs) {

      values.push(inputs[i].value);

    }

    console.log(values);

  }

<div id="log">

  <div class="form-group" style="border-bottom: 1px solid black;">

    <div class="form-group">

      <label class="col-sm-2 control-label">

        Log Name <sup style="color: red;">(*)</sup></label

      >

      <div class="col-sm-2">

        <input

          type="text"

          class="form-control text banner_value"

          id="banner_value"

        />

        <div class="help-block with-errors"></div>

      </div>

      <label class="col-sm-2 control-label">

        Start Day <sup style="color: red;">(*)</sup></label

      >

      <div class="col-sm-2">

        <input type="date" class="form-control text" id="start_day" />

        <div class="help-block with-errors"></div>

      </div>

      <label class="col-sm-2 control-label">

        End Day <sup style="color: red;">(*)</sup></label

      >

      <div class="col-sm-2">

        <input type="date" class="form-control text" id="end_day" />

        <div class="help-block with-errors"></div>

      </div>

    </div>

    <div class="form-group">

      <label class="col-sm-2 control-label">

        Filter Condition <sup style="color: red;">(*)</sup></label

      >

    </div>

    <div id="banner_input" class="form-group">

      <label class="col-sm-2 control-label"> Banner </label>

      <div class="col-sm-3">

        <input type="text" class="form-control text" id="banner_value" />

        <div class="help-block with-errors"></div>

      </div>

      <div class="col-sm-3">

        <input type="checkbox" class="control-label" id="banner_split" />

        <lable> split </lable><br />

      </div>

    </div>

    <div id="domain_input" class="form-group">

      <label class="col-sm-2 control-label"> Domain </label>

      <div class="col-sm-3">

        <input type="text" class="form-control text" id="domain_value" />

        <div class="help-block with-errors"></div>

      </div>

      <div class="col-sm-3">

        <input type="checkbox" class="control-label" id="domain_split" />

        <lable> split </lable><br />

      </div>

    </div>

  </div>

</div>

<button onclick="getValues()">click me</button>

var inputs = document.getElementById("log").getElementsByTagName("input");

var values = [];

for (i in inputs) {

    values.push(inputs[i].value);

}

console.log(values);

您可以JS在单击按钮后使用此代码

Answer 2

如果你想从输入标签中获取数据

function myFunction() {

  console.log(document.getElementById("myText").value) 

}

<!DOCTYPE html>

<html>

<body>

Name: <input type="text" id="myText" value="">

<button onclick="myFunction()">Try it</button>

</body>

</html>

Answer 3

我认为你想要得到的是全部信息。在这种情况下，您需要使用

form

标签而不是 div。Div 没有与数据相关的含义。它只是一个显示为块的容器。

Answer 4

如果您想获取输入字段的值，请尝试将其放入您的 html 中：

    <script>

            const logYourLog = (e) => {

        console.log('Here is your value', document.getElementById("banner_value").value);      

      }

    </script>