Can't get the value of an element

Question

I am trying to get the value of an input element. The element is in a modal and the modal data is populated with different values depending on the button I click to open the modal.

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);
}

error: TypeError: modalBody.item(...).getElementsByTagName(...)[2].getElementById is not a function

I also tried with document.getElementById("mac-name").value; but that returns blank

<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>

Answer 1

Instead of using getElementsByClassName and then running the following on each element:

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

You can use instead use querySelectorAll and pass in .modal-body div #mac-name . This will select all elements with the id mac-name inside a div within an element with the class modal-body . You can use the results of this to then loop over each element and get each value:

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

See example below:

 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>