Ways to avoid storing repeating paragraphs in JavaScript Array?

Question

Ways to avoid storing repeating paragraphs in JavaScript Array?

Can someone help me with my code? I am struggling to prevent duplicate data from being saved into an array. When I click on any two paragraph elements, the text inside them gets added to an array named `test`. However, I want to avoid saving the same text if I click on a paragraph twice. How can I achieve this and prevent duplicate entries in the array?

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>

javascript

Answer 1

Answer №1

To ensure that the array does not already contain the item, you can utilize the Array.prototype.includes method. If the item is not present in the array, then use the push method to add it.

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)) // Prevents duplicate elements from being added.
      test.push(text);
  }
  console.log(test);
}));

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

Answer 2

To ensure that the array does not already contain the item, you can utilize the Array.prototype.includes method. If the item is not present in the array, then use the push method to add it.

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)) // Prevents duplicate elements from being added.
      test.push(text);
  }
  console.log(test);
}));

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

Answer 3

Answer №2

By simply clicking on a paragraph, you can add the attribute data-checked. If you click on it again, you can check if e.target.dataset.checked is true and avoid adding 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>

Answer 4

By simply clicking on a paragraph, you can add the attribute data-checked. If you click on it again, you can check if e.target.dataset.checked is true and avoid adding 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>

Ways to avoid storing repeating paragraphs in JavaScript Array?

Answer №1

Answer №2

Similar questions

Automatically populating state and city fields with zip code information

Ensuring the child div's height does not overflow beyond the parent div

Transfer the chosen language from the uib-dropdown language selector to the $scope variable

What is the best way to obtain a date in the format of yyyy_mm_dd from a datepicker tool?

React and Lottie Animation seamlessly synchronized with scrolling movements

Choose particular content enclosed by two strings (across multiple lines)

Develop an enhancement for the Date object in Angular 2 using Typescript

Instructions on how to implement a readmore button for texts that exceed a specific character length

Revise the text while keeping the column content unchanged

Guide on securely presenting an HTTP-only cookie as a bearer token, without the use of Angular.JS

What methods can I use to evaluate the efficiency of my website?

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

Restrict the height of posts created in the summernote editor

Leveraging the power of the Twitter API to integrate real-time tweets into custom code

Maintain the chosen month in every dropdown toggle div in angular 4

Utilize Optional Chaining for verifying null or undefined values

Firefox and IE are unable to make changes to cssRules

The form validation in Bootstrap 5 seems to be having some trouble triggering

Only execute the NPM script if there is a staged JavaScript file

Firebase: Saving data to a nonexistent object