Copy the header to input

Question

There are several identical blocks with a header and a button under it tell me how to copy the header to input when the button is pressed. How do I handle multiple buttons and headers?

if there is only one header then this code works

const modalTitle = document.querySelector('.popup_wrap>h3');
const modalBtn = document.querySelector('.popup-btn');
const resInp = document.querySelector('.research-title');

modalBtn.addEventListener('click', function(e) {
  resInp.value = modalTitle.innerHTML;
});

<div class="popup_wrap">
  <h3>Title</h3>
  <a class="popup-btn" data-modal="5">Click</a>
</div>
<div class="popup_wrap">
  <h3>Title2</h3>
  <a class="popup-btn" data-modal="5">Click</a>
</div>

Please finish your question with a "?" ex. *How do I handle multiple buttons and headers?* — zer00ne, Jun 28 '23 at 11:41
Does this answer your question? [How to addEventListener to multiple elements in a single line](https://stackoverflow.com/questions/40956717/how-to-addeventlistener-to-multiple-elements-in-a-single-line) — InSync, Jun 28 '23 at 11:49
Instead of selecting with a global `.popup_wrap > h3`, use the `this` inside the event listener to track your way to the title (e.g. `this.parentElement.querySelector('h3')`). — InSync, Jun 28 '23 at 11:53

Kaddath · Accepted Answer · 2023-06-28T12:29:26.230

You can do like this: previousElementSibling gets the precedent node at the same level inside the parent.

If you have nodes in between you can repeat the process until you find a h3. (Or use this.parentElement.querySelector('h3') as suggested in a comment)

This is a fool proof version for as many dynamically added elements without the need of ids or named function, as long as the js code runs after the elements are added.

const modalBtns = document.querySelectorAll('.popup-btn');
const resInp = document.querySelector('.research-title');

for(let i = 0; i < modalBtns.length; i++){
  modalBtns[i].addEventListener('click', function(e) {
    resInp.value = this.previousElementSibling.innerHTML;
  });
}

<input class="research-title"/>

<div class="popup_wrap">
  <h3>Title</h3>
  <a class="popup-btn" data-modal="5">Click</a>
</div>
<div class="popup_wrap">
  <h3>Title2</h3>
  <a class="popup-btn" data-modal="5">Click</a>
</div>

You're welcome, glad to help – Kaddath Jun 28 '23 at 12:32 — Kaddath, Jun 28 '23 at 12:32

score 0 · Answer 2 · answered Jun 28 '23 at 11:45

0

try to create a function and call it on button click like the code below

function copy(id){
  const header = document.getElementById(id)
  console.log(header.innerHTML)
  // do this instead console.log
  // const resInp = document.querySelector('.research-title');
  //resInp.value = header.innerHTML
}

<div class="popup_wrap">
        <h3 id="header-1">Title</h3>
        <a class="popup-btn" onclick="copy('header-1')" data-modal="5">Click</a>
    </div>
    <div class="popup_wrap">
        <h3 id="header-2">Title2</h3>
        <a class="popup-btn" onclick="copy('header-2')" data-modal="5">Click</a>
    </div>

answered Jun 28 '23 at 11:45

Ghadeer Ahmad

119
5

popup_wrap - this block is created dynamically, there is no possibility to register for each of your id – alex Jun 28 '23 at 11:50
you can assign an id for each one by adding the index of each item to the id like so "header-{index}", or you can change the function to pass the title directly instead of the header id. If you want i can edit the code for you – Ghadeer Ahmad Jun 28 '23 at 11:52
I will be very grateful to you) – alex Jun 28 '23 at 11:54
it's my pleasure, but first can i know how you generate the items, i mean are you using react or vue or somthing else? so i can help you more with that. – Ghadeer Ahmad Jun 28 '23 at 11:56

muktadir · Answer 3 · 2023-06-28T12:04:21.297

here is the modified code hope it will help you :

function copy(header_id) {
    const header = document.getElementById(id);
    const resInp = document.querySelector('.research-title');
    resInp.value = header.innerHTML;
}

 <div class="popup_wrap">
 <h3 id="header-1">Title</h3>
 <a class="popup-btn" onclick="copy('header-1')" data-modal="5">Click</a>
 </div>
 <div class="popup_wrap">
 <h3 id="header-2">Title2</h3>
  <a class="popup-btn" onclick="copy('header-2')" data-modal="5">Click</a>
 </div>

Explanation :

The copy function takes an header_id parameter, which represents the ID of the header element to be copied. Inside the function, the header element is selected using document.getElementById(id). The resInp variable is selected using document.querySelector('.research-title') outside the copy function, assuming the input field with the class research-title exists on the page.When the button is clicked, the copy function is called with the corresponding header ID as an argument. The function retrieves the header element and assigns its innerHTML value to the resInp input field's value property, effectively copying the header text to the input field.

Copy the header to input

3 Answers3