使用for循环渲染数据库数据后，JS复制按钮仅复制第一条数据的问题

Hey there, I see exactly what's going on here—your issue stems from duplicate IDs across all your input elements. When you loop through twenty, every input gets the same id="myInput1", and document.getElementById() only ever grabs the first element with that ID. That's why clicking any copy button only copies the first entry's details.

Here are two clean ways to fix this:

Option 1: Use Unique IDs (Simple & Direct) #

Modify your template to generate a unique ID for each input using a unique property from your twenty object (like its database ID), then pass that ID to your copy function:

Updated Template Code #

{% for twenty in twenty %} 
<li class="nav-item dropdown"> 
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    {{ twenty.name }} 
  </a> 
  <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
    <div class="copy"> 
      <div class="row"> 
        <div class="col-md-8"> 
          <!-- Use a unique identifier from your object to make the ID unique -->
          <input type="text" value="{{ twenty.detail }}" id="myInput-{{ twenty.id }}"> 
        </div> 
        <div class="col-md-4"> 
          <!-- Pass the unique ID to the copy function -->
          <button onclick="myFunction1('myInput-{{ twenty.id }}')">Copy</button> 
        </div> 
      </div> 
    </div> 
  </div> 
</li> 
{% endfor %} 
<h3><a href="{% url 'movielink: movie_list_view_all' twenties.slug %}">View All</a></h3> 

Updated JavaScript #

{% block script %} 
<script> 
function myFunction1(inputId) { 
  var copyText = document.getElementById(inputId); 
  copyText.select(); 
  copyText.setSelectionRange(0, 99999); // For mobile device compatibility
  document.execCommand("copy"); 
  alert("Copied the text: " + copyText.value); 
} 
</script> 
{% endblock script %}

Option 2: Use DOM Traversal (No IDs Needed) #

If you prefer not to rely on IDs, you can traverse the DOM from the clicked button to find its corresponding input. This is more robust if you don't have a guaranteed unique property for each twenty object:

Updated Template Code #

{% for twenty in twenty %} 
<li class="nav-item dropdown"> 
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    {{ twenty.name }} 
  </a> 
  <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
    <div class="copy"> 
      <div class="row"> 
        <div class="col-md-8"> 
          <input type="text" value="{{ twenty.detail }}"> 
        </div> 
        <div class="col-md-4"> 
          <!-- Pass the button element itself to the function -->
          <button onclick="myFunction1(this)">Copy</button> 
        </div> 
      </div> 
    </div> 
  </div> 
</li> 
{% endfor %} 
<h3><a href="{% url 'movielink: movie_list_view_all' twenties.slug %}">View All</a></h3> 

Updated JavaScript #

{% block script %} 
<script> 
function myFunction1(button) { 
  // Traverse up to the parent row, then find the input inside it
  var copyText = button.closest('.row').querySelector('input'); 
  copyText.select(); 
  copyText.setSelectionRange(0, 99999); 
  document.execCommand("copy"); 
  alert("Copied the text: " + copyText.value); 
} 
</script> 
{% endblock script %}

Both approaches will fix your issue—pick whichever fits your project's needs better!

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