bootstrap 5-多模态

Question

基于此：https://getbootstrap.com/docs/5.0/components/modal/#varying-modal-content

按钮调用模式

 <button type="button" class="btn btn-primary button-sm" data-bs- 
 toggle="modal" data-bs-target="#editpass" 
 data-bs-category="$row['category']" 
 data-bs-username="$row['username']" 
 data-bs-cid="$row['cid']"  
 data-bs-hostname="$row['hostname']" 
 data-bs-pw="generateStrongPassword('8', false, 'luds')" 
 data-bs-id="$row['id']"><i class="fas fa-pencil-alt fa-fw fa-lg 
 me-10px"></i></button>

我有一个像这样的模式。

            <!-- modal for '.$row['element'].' editpass-->
        <div class="modal fade" id="editpass">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Edit Pass for </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
              </div>
              
              <div class="modal-body">
              <form action="../includes/actions.php" method="POST">
              
                <input type="hidden" name="action" value="update_password">                        
                <input type="hidden" id="id" name="id">
                <input type="hidden" id="username" name="username">
                <input type="hidden" id="cid" name="cid">
                <div class="form-group g-mb-20">
                  <label class="form-label" for="password">Password (Auto Generated)</label> 
                  <div class="input-group">   
                      <input id="password" class="form-control" type="text">
                      <div class="input-group-text"><i class="fa fa-braille"></i></div>
                  </div>
                  <BR>
                  <!-- Toggles Radio -->
                  <div class="form-group">
                      <div class="form-check form-switch">
                        <input class="form-check-input" name="pass_options" type="radio" value="1" checked="">
                        <label class="form-label"><span>Apply to single record</span> </label>
                      </div>
                  </div>
                  <!-- End Toggles Radio -->
                  
                  <!-- Toggles Radio -->
                  <div class="form-group">
                      <div class="form-check form-switch">
                        <input class="form-check-input" name="pass_options" type="radio" value="2">
                        <label class="form-label"><span class="modal-username">Apply to all with username</span></label>
                      </div>
                  </div>
                  <!-- End Toggles Radio -->
                  
                  <!-- Toggles Radio -->
                  <div class="form-group">
                      <div class="form-check form-switch">
                        <input class="form-check-input" name="pass_options" type="radio" value="3">
                        <label class="form-label"><span class="modal-category">Apply to all in category </span></label>
                      </div>
                  </div>
                  <!-- End Toggles Radio -->
                </div>
              </div>
              <div class="modal-footer">
                <a href="javascript:;" class="btn btn-white" data-bs-dismiss="modal">Close</a>
                <button type="submit" class="btn btn-primary">Submit</button>
              </div>
              </form>

            </div>
          </div>
        </div>
        <!-- End '.$row['element'].' pass modal window -->    

然后我在bottome中有了相应的javascript，如下所示

 var editpass = document.getElementById('editpass')
 editpass.addEventListener('show.bs.modal', function (event) {
 // Button that triggered the modal
 var button = event.relatedTarget
 // Extract info from data-bs-* attributes
 var hostname = button.getAttribute('data-bs-hostname')
 var id = button.getAttribute('data-bs-id')
 var cid = button.getAttribute('data-bs-cid')
 var category = button.getAttribute('data-bs-category')
 var username = button.getAttribute('data-bs-username')
 var pw = button.getAttribute('data-bs-pw')
 // If necessary, you could initiate an AJAX request here
 // and then do the updating in a callback.
 //
 // Update the modal's content.
 var modalTitle = editpass.querySelector('.modal-title')
 var modalUsername = editpass.querySelector('.modal-username')
 var modalCategory = editpass.querySelector('.modal-category')
 var modalCID = editpass.querySelector('.modal-cid')
 var modalID = editpass.querySelector('.modal-id')
 var modalPw = editpass.querySelector('.modal-body input')

 modalTitle.textContent = 'Editing passwords for ' + hostname
 modalUsername.textContent = 'Apply to all with username ' + username
 modalCategory.textContent = 'Apply to all in category ' + category
 modalPw.value = pw
 })

我可以很好地显示用户名和类别，并且我确认pw是正确传递的，因为我可以更改modalUsername.textContent = 'Apply to all with username‘+ pw，例如，它会显示密码。我正在苦苦思索为什么输入值不能被输入。我在控制台中没有错误，正在寻找一些指导。

在这个特定的页面上，它是一个大约有330行的datatable，每一行都可以弹出带有从data-bs-attribute传递来的变量的模式。如前所述，用户名和类别都很好，但无法获得密码来显示任何内容。一旦我弄清楚了这一点，我应该也能做隐藏的输入，提前谢谢！

Answer 1

var密码=editpass.querySelector(‘# modalPw’)

这似乎对我有用，但我不明白为什么。