时间戳

首页 > 解决方案 > 无法获取元素的值

javascript - 无法获取元素的值

问题描述

我正在尝试获取输入元素的值。该元素处于模式中，并且模式数据填充有不同的值，具体取决于我单击以打开模式的按钮。

var modalBody = document.getElementsByClassName("modal-body");
for(var i = 0; i < modalbody.length; i++) {
    var mac = modalBody.item(i).getElementsByTagName('div')[2].getElementById("mac-name").value;
    alert(mac);
}

错误：TypeError：modalBody.item(...).getElementsByTagName(...)[2].getElementById 不是函数

我也尝试过，document.getElementById("mac-name").value;但返回空白

<form method="post">
    <div class="modal-body">
        <div class="form-group">
            <label for="station-name" class="col-form-label">ID:</label>
            <input class="form-control" id="station-id" name="edit--id" required="" type="text" hidden="">
            <input class="form-control" id="station-name" name="edit--name" required="" type="text">
        </div>
        <div class="form-group">
            <label for="profile-name" class="col-form-label">Profile:</label>
            <select type="text" class="form-control" id="profile-name" name="edit-profile" required="">
            <option>name1</option>
            <option>name2</option>
            </select>
        </div>
        <div class="form-group">
            <label for="mac-name" class="col-form-label">MAC Address:</label>
            <input class="form-control" id="mac-name" name="edit-mac" required="" type="text">
        </div>
    </div>
</form>

标签： javascripttampermonkey

解决方案

而不是在每个元素上使用getElementsByClassName然后运行以下命令：

var mac = modalBody.item(i).getElementsByTagName('div')[2].getElementById("mac-name").value;

您可以改用 usequerySelectorAll并传入.modal-body div #mac-name. mac-name这将在div一个具有 class 的元素中选择所有具有 id的元素modal-body。您可以使用此结果循环遍历每个元素并获取每个值：

var macs = document.querySelectorAll('.modal-body div #mac-name');

请参见下面的示例：

var macs = document.querySelectorAll('.modal-body div #mac-name');
for (var i = 0; i <  macs.length; i++) {
  var mac = macs[i].value;
  console.log(mac);
}
<form method="post">
  <div class="modal-body">
    <div class="form-group">
      <label for="station-name" class="col-form-label">ID:</label>
      <input class="form-control" id="station-id1" name="edit--id" required="" type="text" hidden="">
      <input class="form-control" id="station-name1" name="edit--name" required="" type="text">
    </div>
    <div class="form-group">
      <label for="profile-name" class="col-form-label">Profile:</label>
      <select type="text" class="form-control" id="profile-name1" name="edit-profile" required="">
        <option>name1</option>
        <option>name2</option>
      </select>
    </div>
    <div class="form-group">
      <label for="mac-name" class="col-form-label">MAC Address:</label>
      <input class="form-control" id="mac-name" name="edit-mac" value="Addr 1" required="" type="text">
    </div>
  </div>
  
  <div class="modal-body">
    <div class="form-group">
      <label for="station-name" class="col-form-label">ID:</label>
      <input class="form-control" id="station-id2" name="edit--id" required="" type="text" hidden="">
      <input class="form-control" id="station-name2" name="edit--name" required="" type="text">
    </div>
    <div class="form-group">
      <label for="profile-name" class="col-form-label">Profile:</label>
      <select type="text" class="form-control" id="profile-name2" name="edit-profile" required="">
        <option>name1</option>
        <option>name2</option>
      </select>
    </div>
    <div class="form-group">
      <label for="mac-name" class="col-form-label">MAC Address:</label>
      <input class="form-control" id="mac-name" name="edit-mac" value="Addr 2" required="" type="text">
    </div>
  </div>
</form>

推荐阅读