How to get the details of elements in a div with a click function

Question

I have four divs and each contains a title, image and button. How can i make the click of that button pick the details of the div it resides in only. I plan to do this with just one function for all four divs because i will be creating more divs on the page.

I have created the divs and all shares the same ids. Each div has its own title, image and button. After creating the function and using the onclick event listener, the function always returns the value of the first div even if i click the second, third or fourth.

I am new to JS but not afraid to grow and master it. I need help on this. Thanks

const forms = document.querySelectorAll("button[type=submit]");
for (const form of forms) {
  form.addEventListener('click', function(event) {
    let productName = document.getElementById('productName').innerText;
    let productImg = document.getElementById('productImg').src;
    let package = document.getElementById('package').value;

    alert('Working See Details Below:' + '\n' + productName + '\n\n' + productImg + '\n\n' + package);
  })
}

form {
  width: 25%;
  height: inherit;
  overflow: auto;
  float: left;
}

<body>
  <form id="form">
    <h1 id="productName">Div 1</h1>
    <img src="img\red.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
    <select name="category" id="package">
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <button type="submit">Try it</button>
  </form>

  <form id="form">
    <h1 id="productName">Div 2</h1>
    <img src="img\yellow.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
    <select name="category" id="package">
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <button type="submit">Try it</button>
  </form>

  <form id="form">
    <h1 id="productName">Div 3</h1>
    <img src="img\blue.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
    <select name="category" id="package">
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <button type="submit">Try it</button>
  </form>

  <form id="form">
    <h1 class="productName">Div 4</h1>
    <img src="img\black.jpg" alt="Trial Image" width="10%" height="100%" class="images" id="productImg"><br>
    <select name="category" id="package">
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <button type="submit">Try it</button>
  </form>

My expectations as explained earlier is to have the button of a div return the details of the title, image source and user input from the select option moved to localStorage when i can then use it on other pages on the app.

For starters, IDs [must be unique](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) to the page. I suggest using classes instead. — showdev, Jul 06 '19 at 23:28
I have also uploaded to a repo on github https://github.com/momoduoladapo/getDivDetails — Dapo Momodu, Jul 06 '19 at 23:28
I have used changed the Ids to classes but still the same result. Update on my repo — Dapo Momodu, Jul 06 '19 at 23:31

showdev · Answer 1 · 2019-07-06T23:42:02.137

IDs must be unique to the page. I recommend using classes instead.
This includes classes for "productName", "productImg", "package", and "form".

I also suggesting binding a "submit" handler to the forms, instead of a "click" handler to the buttons. This allows you to select classes inside the submitted form by using the this keyword.

Below, I've used preventDefault() to prevent the default "submit" action.

Here's a demonstration:

const forms = document.querySelectorAll(".form");

for (const form of forms) {
  form.addEventListener('submit', function(event) {

    event.preventDefault();

    let productName = this.querySelector('.productName').innerText;
    let productImg = this.querySelector('.productImg').src;
    let package = this.querySelector('.package').value;

    alert('Working See Details Below:' + '\n' + productName + '\n\n' + productImg + '\n\n' + package);

  });
}

.form {
  width: 25%;
  height: inherit;
  overflow: auto;
  float: left;
}

<form class="form">
  <h1 class="productName">Div 1</h1>
  <img src="img\red.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
  <select name="category" class="package">
    <option value="Business Plan">Business Plan</option>
    <option value="Feasibility Report">Feasibility Report</option>
  </select>
  <button type="submit">Try it</button>
</form>

<form class="form">
  <h1 class="productName">Div 2</h1>
  <img src="img\yellow.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
  <select name="category" class="package">
    <option value="Business Plan">Business Plan</option>
    <option value="Feasibility Report">Feasibility Report</option>
  </select>
  <button type="submit">Try it</button>
</form>

<form class="form">
  <h1 class="productName">Div 3</h1>
  <img src="img\blue.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
  <select name="category" class="package">
    <option value="Business Plan">Business Plan</option>
    <option value="Feasibility Report">Feasibility Report</option>
  </select>
  <button type="submit">Try it</button>
</form>

<form class="form">
  <h1 class="productName">Div 4</h1>
  <img src="img\black.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
  <select name="category" class="package">
    <option value="Business Plan">Business Plan</option>
    <option value="Feasibility Report">Feasibility Report</option>
  </select>
  <button type="submit">Try it</button>
</form>

How to get the details of elements in a div with a click function

1 Answers1