How to store each paragraph into an javascript array when onclick event occurs?

Question

I have tried the following code. When the user clicks on any paragraph then this paragraph must be stored into a javascript array. If I clicked another paragraph then it must also stored into any array with out losing the last one.

function makeSelection(e) {
  var test = [];
  for (var i = 0; i < e.children[0].length) {
    test.push(test[i])
  }
  console.log(test)
}

<a href="#" onclick="makeSelection(this)">
  <p>This is p1</p>
</a>
<a href="#" onclick="makeSelection(this)">
  <p>This is p2</p>
</a>
<a href="#" onclick="makeSelection(this)">
  <p>This is p3</p>
</a>

I made you a snippet. You are missing ;i++ Also you should have a as a child of the a and not the other way around. Voting to close since It's caused by a typo or problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers — mplungjan
– mplungjan, Commented Jan 14, 2020 at 9:43

mplungjan · Accepted Answer · 2020-01-15 10:55:00Z

1

Your loop is missing ;i++
You are pushing test[i] to itself. That does not sound right

I believe you wanted to do this - I copied your HTML from another question you wrote. NOTE I cannot test the paragraph anymore since you have other tags in the paragraph

window.addEventListener("load", function() {
  var test = [];
  [...document.querySelectorAll(".container p")].forEach(function(para) {
    para.addEventListener("click", function(e) {
      var text = e.currentTarget.textContent;
      if (test.indexOf(text) === -1) test.push(text); // or !test.includes(text) (not IE)
      else alert("Already added");
      console.log(test)
    })
  })
})

#container p {
  cursor: pointer;
  text-decoration: underline;
}

<div class="container">
  <p>
    <b>Group:N</b>Code:1234<br/>
    <b>Session Type:</b>CS<br/>
    <b>Location:</b>Main Hall<br/>
    <b>Time:</b>14:00<br/>
    <b>Day:</b>Tuesday<br/>
    <b>Duration:</b>1hour<br/>
  </p>
</div>
<div class="container">
  <p>
    <b>Group:M</b>Code:98743<br/>
    <b>Session Type:</b>NP<br/>
    <b>Location:</b>Main Hall2<br/>
    <b>Time:</b>11:00<br/>
    <b>Day:</b>Monday<br/>
    <b>Duration:</b>1hour<br/>
  </p>
</div>

edited Jan 15, 2020 at 10:55

answered Jan 14, 2020 at 9:48

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

David Over a year ago

Thanks for your reply. Can I use class instead of Id for container?It will works if not can u please give me any clue.Many Thanks

mplungjan Over a year ago

@David I have updated my answer to handle your (invalid and now fixed) HTML

David Over a year ago

just last thing how to display alert error message.If same paragraph clicked twice or more.

David Over a year ago

Many Thanks. But I did same thing before, I don't know why its not work.Anyhow, I appreciate u help..

David Over a year ago

Just a quick question, Can I validate the time and day into paragraphs that given above,basically I want to check the time and day clash..Thanks

|

onrszk · Accepted Answer · 2020-01-14 19:11:43Z

0

Using anchor tag (a) useless here which is not designed for this purpose. You can implement onclick attribute directly to p tag. If you want to call makeSelection function for each p tag, you don't need to iterate.

You can simply do this:

for JS:

let data = [];
function makeSelection(text) {
    data.push(text.textContent);
    console.log(data);
}

for HTML:

    <p onclick="makeSelection(this);">TEST1</p>
    <p onclick="makeSelection(this);">TEST2</p>
    <p onclick="makeSelection(this);">TEST3</p>

answered Jan 14, 2020 at 19:11

onrszk

1

Comments

mplungjan · Accepted Answer · 2020-01-14 09:58:00Z

-1

Please try this.

function makeSelection(e) {
  let item = document.querySelectorAll('a');
  console.log(item);
  var test = [];
  for (var i = 0; i < item.length; i++) {
    test.push(item[i].children[0].textContent)
  }
  console.log(test)
}

<a href="#" onclick="makeSelection(this)">
  <p>This is p1</p>
</a>
<a href="#" onclick="makeSelection(this)">
  <p>This is p2</p>
</a>
<a href="#" onclick="makeSelection(this)">
  <p>This is p3</p>
</a>

edited Jan 14, 2020 at 9:58

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jan 14, 2020 at 9:55

Merci Dieu KIMPOLO

4433 silver badges10 bronze badges

3 Comments

mplungjan Over a year ago

I made you a snippet. Please run it to see it is not doing what you expect

Merci Dieu KIMPOLO Over a year ago

Please try to run it, I'm getting this ["This is p1", "This is p2", "This is p3"]

mplungjan Over a year ago

Yes, all 3 P content each time one is clicked. That is not what OP asked. they want to store one at a time. See my answer

Collectives™ on Stack Overflow

How to store each paragraph into an javascript array when onclick event occurs?

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related