如何实现点击Div打开Modal并将输入内容填充至.item-edit？

Got it, let's fix this up! The core issue here is that your current code doesn't track which .grid-item was clicked to open the modal, so when you save, it doesn't know which .item-edit to update. Here's a straightforward way to implement this:

Step-by-Step Explanation #

• Track the clicked item: When a user clicks a .grid-item, we'll store a reference to that specific element so we know where to send the input later.
• Update the modal save logic: Instead of just closing the modal, the save button will grab the input value, insert it into the tracked .grid-item's .item-edit div, then close the modal.
• Clean up state: We'll reset the tracked reference and clear the input field after saving to avoid leftover data for the next use.

Modified Code #

HTML #

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>

<div onclick="openModal(this)" class="grid-item">
  <div class="box-number">1</div>
  <div class="item-edit"></div>
  <div class="null-object"></div>
</div>
<div onclick="openModal(this)" class="grid-item">
  <div class="box-number">2</div>
  <div class="item-edit"></div>
  <div class="null-object"></div>
</div>
<div onclick="openModal(this)" class="grid-item">
  <div class="box-number">3</div>
  <div class="item-edit"></div>
  <div class="null-object"></div>
</div>

<div id="id01" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="closeModal()" class="w3-button w3-display-topright">&times;</span>
      <p>Name</p>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
      <input onclick="saveAndCloseModal()" type="submit" value="SAVE">
    </div>
  </div>
</div>

CSS (unchanged) #

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}

JavaScript #

// Store reference to the clicked grid item
let currentGridItem = null;

function openModal(element) {
  // Save the clicked item
  currentGridItem = element;
  // Clear input field for fresh start
  document.getElementById('fname').value = '';
  // Open modal
  document.getElementById('id01').style.display = 'block';
}

function saveAndCloseModal() {
  if (!currentGridItem) return; // Exit if no item was clicked
  
  // Get input value
  const inputValue = document.getElementById('fname').value.trim();
  
  // Update the corresponding .item-edit div
  const itemEdit = currentGridItem.querySelector('.item-edit');
  itemEdit.textContent = inputValue;
  
  // Close modal and reset state
  closeModal();
}

function closeModal() {
  document.getElementById('id01').style.display = 'none';
  currentGridItem = null; // Reset reference
}

How It Works #

1. When you click any .grid-item, openModal(this) passes the clicked element to the function, which stores it in currentGridItem and opens the modal (with a cleared input field).
2. When you click "SAVE", saveAndCloseModal() grabs the input value, finds the .item-edit inside the stored currentGridItem, and sets its text content to the input value.
3. The modal closes, and currentGridItem is reset so the next click starts fresh.

内容的提问来源于stack exchange，提问作者johnny555