I have a product list (li elements) with custom titles and buttons. In addition there is also a popup form which is triggered by clicking any of the buttons.
There are as many Click me! buttons, as many titles, but all of them trigger the same pop-up.
What I want to achieve is that form input element's value of the popup form is taken from a specific title according to the position of the button. So, if I click the Click me! under the button Second title, the input element value will be filled with Second title.
This is what I figured out, but somehow it won't work. I get the same value. Could someone help me to find the problem?
Thanks in advance!
var title = document.getElementsByClassName('title');
var titleText;
var i;
for (i = 0; i < title.length; i++) {
titleText = title[i].innerText;
console.log("Name: " + titleText + ", position: " + i);
}
document.getElementById('inserthere').value = titleText; <ul class="products-list"><li class="product"><h2 class="title">First title</h2><a class="button" href="#">Click me!</a></li><li class="product"><h2 class="title">Second title</h2><a class="button" href="#">Click me!</a></li><li class="product"><h2 class="title">Third title</h2><a class="button" href="#">Click me!</a></li><li class="product"><h2 class="title">Fourth title</h2><a class="button" href="#">Click me!</a></li></ul><div class="popup"><input type="text" id="inserthere" value=""></div>
