How to prevent saving duplicate paragraphs in JavaScript Array?

Question

Here is my code. I am badly stuck to figure out how to prevent saving duplicate data into an array. Basically,when i click on any two of paragraph elements then the text contain in paragraph saved into an array called test.But, I want, when I click any paragraph twice then text must not be saved into an array.I want to prevent any duplicate entry.

var test = [];

[...document.querySelectorAll(".container")].forEach(div => div.addEventListener("click", function(e) {
  if (e.target.tagName === "P") {
    test.push(e.target.textContent);
  }
  console.log(test);
}));

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

Yes, I checked this but before but it did not work in my case.Thanks — David, Jan 15 '20 at 10:29
You can use Array.includes() to check if an element is in the array — Loxx, Jan 15 '20 at 10:31
I recognise that code. If you had posted more HTML and asked a more detailed question in [previous question](https://stackoverflow.com/questions/59731035/how-to-store-each-paragraph-into-an-javascript-array-when-onclick-event-occurs) I could have given a better answer — mplungjan, Jan 15 '20 at 10:32
@mplungjan Thanks for ur reply, basically I jusy want to make it simple. — David, Jan 15 '20 at 10:37
@David I updated my answer [here](https://stackoverflow.com/a/59731159/295783) — mplungjan, Jan 15 '20 at 10:45
@mplungjan Many thanks.Yes Its perfectly working now. My bad, I must explain it yesterday.. — David, Jan 15 '20 at 10:48
I have just posted a question. Can you please help me out. https://stackoverflow.com/questions/59752075/how-to-validate-data-into-paragraphs-text-using-javascript — David, Jan 15 '20 at 13:06

score 1 · Accepted Answer · answered Jan 15 '20 at 10:30

1

You just need to check if the array already contains the item or not. If it doesnt then push or else ignore. Use Array.prototype.includes for this.

var test = [];
[...document.querySelectorAll(".container")].forEach(div => div.addEventListener("click", function(e) {
  if (e.target.tagName === "P") {
    var text = e.target.textContent;
    if (!test.includes(text)) // This is the code to stop repeating elements.
      test.push(text);
  }
  console.log(test);
}));

<div class="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

answered Jan 15 '20 at 10:30

Archie

901
4
11

This code does not work proper with the current HTML. Anyway it's a dupe – mplungjan Jan 15 '20 at 10:46
Thanks for your answer.It works but when I want to display error message if I click twice a same p, in console using else but this is not working... – David Jan 15 '20 at 10:46
@David I think this wasnt the original scope of what has been asked. If this solves the problem you may close the question by marking the answer correct and ask another question. This keep SO concise! – Archie Jan 15 '20 at 11:04

score 0 · Answer 2 · edited Jan 15 '20 at 10:39

When you click on a paragraph add data-checked next time you click on it you can check e.target.dataset.checked if it's true don't add it.

var test = [];

[...document.querySelectorAll(".container")].forEach(div => div.addEventListener("click", function(e) {
  if (e.target.tagName === "P" && !e.targed.dataset.checked) {

    test.push(e.target.textContent);
    e.target.dataset.checked = true;
  }
  console.log(test); 
}));

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

I made you a snippet. It does not work – mplungjan Jan 15 '20 at 10:39 — mplungjan, Jan 15 '20 at 10:39
@mplungjan yes, I checked it but its not working.. – David Jan 15 '20 at 10:45 — David, Jan 15 '20 at 10:45

How to prevent saving duplicate paragraphs in JavaScript Array?

2 Answers2