Is there any way in JS to select only specific tag elements

Question

As you can see in below snippet the code of class="CardData" is copied to class="optionData" .
But I want to copy only the li tag but here <button> & <a> tags are also copied.

I tried to use getElementsByTagName but it is displaying data without bullets and had to specify [0],[1],[2],..... to display all . As there can be any number of details it is cumbersome to do that .

Is there any way to copy data from class="CardData" to class="optionData" with only li tag with a single JS

Let me know if you need clarification

function details(saad) {
  var reed2 = saad.parentElement.getElementsByClassName("CardData")[0].innerHTML;
  document.getElementsByClassName("optionData")[0].innerHTML = reed2;

}
document.querySelectorAll(".CardBtn").forEach(details);

<div>
  <ul class="CardData">
    <li>Windows 11</li>
    <li> 8GB Ram</li>
    <li>1TB SSD</li>
    <li>Intel Core i7 (11th Gen)</li>
    <a>Not in the stock</a>
    <li>NVIDIA GeForce GTX 1050</li>
    <li>15.6 inch Full HD Display</li>
    <li> Dolby Audio</li>
    <li>1 Year Onsite Warranty</li>
    <button class="MoreLess">+Show More</button><br>
  </ul>

  <button class="CardBtn" onclick="details(this)">Buy</button>
  <hr>Data Box:<br><br>
  <span class="optionData"> </span>
  <hr>
</div>

Are you looking for something like [this](https://stackoverflow.com/questions/11665884/how-can-i-parse-a-string-with-a-comma-thousand-separator-to-a-number)? — David, Aug 20 '21 at 20:38
Why don't you iterate over all nodes matching the class names instead of providing hard coded indexes? — Guerric P, Aug 20 '21 at 20:39
@Spectric algebra commands are only applicable on numbers so removing `₹` & `,` from the numbers to execute commands — , Aug 20 '21 at 20:42
@GuerricP brother how it can be achieved as I am new to JS don't know — , Aug 20 '21 at 20:43
@David not that one I want a common method to know the discount of all available numbers — , Aug 20 '21 at 20:46
@daad: Is the problem that you're trying to parse numbers, or is the problem that you're trying to iterate over a series of HTML elements instead of hard-coding each one? It's not clear what you're trying to ask. — David, Aug 20 '21 at 20:48
@Spectric & @David some numbers like `₹5,978` are given in pairs whose discount I have to find so I am trying to find a simple single **JS** method to do that and the need for parse is to execute this formula `var reed = ((saad4 - saad8) / saad4) * 100` . I have tried some but don't think it is fast and right . **So I need opinion from you guys** — , Aug 20 '21 at 20:54

Guerric P · Answer 1 · 2021-08-20T21:06:31.083

1

Just make a generic function out of the function you already wrote:

function discount() {
  const items = Array.from(document.getElementsByClassName("item"));

  items.forEach((item) => {
    var saadTotal = item.getElementsByClassName("Total")[0].innerHTML;
    var saad1 = saadTotal.slice(1);
    var saad2 = saad1.split(",");
    var saad3 = saad2[0] + saad2[1];
    var saad4 = Number(saad3);
    var saad = item.getElementsByClassName("DiscPrice")[0].innerHTML;
    var saad5 = saad.slice(1);
    var saad6 = saad5.split(",");
    var saad7 = saad6[0] + saad6[1];
    var saad8 = Number(saad7);
    var reed = ((saad4 - saad8) / saad4) * 100;
    item.getElementsByClassName("demo")[0].innerHTML = reed.toFixed(0) + "% off";
  });
}

discount();

<div class="item">
  <div class="Total">&#x20B9;5,978</div>
  <div class="DiscPrice">&#x20B9;3,999</div>
  <div class="demo"></div>
</div>
<br>
<div class="item">
  <div class="Total">&#x20B9;7,978</div>
  <div class="DiscPrice">&#x20B9;3,999</div>
  <div class="demo"></div>
<div>

edited Aug 20 '21 at 21:06

answered Aug 20 '21 at 20:52

Guerric P

30,447
6
48
86

`querrySelector` @GuerricP is there any way to use `getElementsByClassName` instead of that – Aug 20 '21 at 20:58
Yes you can also do `getElementsByClassName` and `[0]` right after. It's just a matter of how code looks like – Guerric P Aug 20 '21 at 20:59
If i use `getElementsByClassName()[0]` doesn't it become hard code brother and then I have to apply `[1]`,`[2]` and so on – Aug 20 '21 at 21:03
No you didn't get it, I'm editing my answer – Guerric P Aug 20 '21 at 21:05
brother can you tell about my question again as I changed it . Can you tell using `this` keyword – Aug 26 '21 at 15:01
@daad I see no change. As a general practise you should post a new question instead of editing questions because that invalidates the answers that were valid – Guerric P Aug 26 '21 at 15:05
I have found a way to use `this` keyword in answer but not able to execute function automatically – Aug 26 '21 at 15:07
brother can you tell a way to execute the function automatically when using `this` keyword – Aug 26 '21 at 15:09

Wirde · Answer 2 · 2021-08-27T10:24:14.893

From your comment on your question:

some numbers like ₹5,978 are given in pairs whose discount I have to find so I am trying to find a simple single JS method to do that and the need for parse is to execute this formula var reed = ((saad4 - saad8) / saad4) * 100

const price = '₹5,978';
price.replace(/[^0-9.]/g, '');

Would give you: 5978

So if you want to use that formula you could use this:

function calculateDiscount(total, discount) {
  const totalInt = parseInt(total.replace(/[^0-9.]/g, ''), 10);
  const discountInt = parseInt(discount.replace(/[^0-9.]/g, ''), 10);
  return ((totalInt-discountInt) / totalInt) * 100;
}


const total = '₹5,978';
const discount = '₹3,212';
console.log( calculateDiscount(total, discount) );

Now, if any of the numbers you are working with have decimals you will have to do some small adjustments, but otherwise that code should work well for you.

Good luck!

Edit

Per request I'll explain a little bit of what is happening in the code above.

I'm going to guess that this line is the one that's hard to understand:
const totalInt = parseInt(total.replace(/[^0-9.]/g, ''), 10)
So I'll break it down.

total.replace(/[^0-9.]/g, '')
This means we do a text search and replace on total which is the text ₹5,978. We search using a regex, for those of you not familliar with regex take a look here. This specific regex finds everything that isn't a number or a dot. the second parameter in the replace funciton says what we replace the found characters with, in this case an empty string. Meaning we are removing them.

After that we use the function parseInt() which takes a string and converts it in to a integear.

Hope that helps, cheers!

can you use comment brother . Well your answer is right but it is hard for me to understand — , Aug 27 '21 at 09:01
By the way brother you were first in race of bounty and I used your `parseInt` & `/[^0-9.]/g` and other code — , Aug 27 '21 at 20:25
can you tell about the above question . I have changed question and facing problem in it . As I am not able to post another question due prohibition so posted in same question — , Aug 28 '21 at 17:53
do you need to apply bounty on any of your question as this account is going to delete account in 24hrs — , Aug 29 '21 at 07:33

score 0 · Answer 3 · 2021-08-27T09:19:43.600

Well you can do something like in below snippet
You can learn more about split here

function discount(seen) {
  var saadTotal = seen.parentElement.getElementsByClassName("Total")[0].innerHTML;
  var saad1 = saadTotal.slice(1);
  var saad2 = saad1.split(",");
  var saad3 = saad2[0] + saad2[1];
  var saad4 = Number(saad3)
  var saad = seen.parentElement.getElementsByClassName("DiscPrice")[0].innerHTML;
  var saad5 = saad.slice(1);
  var saad6 = saad5.split(",");
  var saad7 = saad6[0] + saad6[1];
  var saad8 = Number(saad7)
  var reed = ((saad4 - saad8) / saad4) * 100
  seen.getElementsByClassName("demo")[0].innerHTML = reed.toFixed(0) + "% off";
}
document.querySelectorAll(".seen").forEach(discount);

<div>
  <div class="seen" onclick=" discount(this)">
    <div class="Total">&#x20B9;5,978</div>
    <div class="DiscPrice">&#x20B9;3,999</div>
    <div class="demo"></div>
  </div>
</div>

<br>

<div>
  <div class="seen" onclick=" discount(this)">
    <div class="Total">&#x20B9;7,978</div>
    <div class="DiscPrice">&#x20B9;3,999</div>
    <div class="demo"></div>
  </div>
</div>

See if this works for you.

Else you can do some adjustment and you will get a method that is applicable on all numbers of your type like using .replace("," , "") instead of splitting and adding them like this in below snippet :
You can learn more about replace here

function discount(seen) {
  var saadTotal = seen.parentElement.getElementsByClassName("Total")[0].innerHTML;
  var saad1 = saadTotal.replace(/₹/gi, "");
  var saad2 = saad1.replace(/,/gi, "");
  var saad3 = Number(saad2)
  var saad = seen.parentElement.getElementsByClassName("DiscPrice")[0].innerHTML;
  var saad4 = saad.replace(/₹/gi, "");
  var saad5 = saad4.replace(/,/gi, "");
  var saad6 = Number(saad5)
  var reed = ((saad3 - saad6) / saad3) * 100
  seen.getElementsByClassName("demo")[0].innerHTML = reed.toFixed(0) + "% off";
}
document.querySelectorAll(".seen").forEach(discount);

<div>
  <div class="seen" onclick=" discount(this)">
    <div class="Total">&#x20B9;6,97,488</div>
    <div class="DiscPrice">&#x20B9;3,99,789</div>
    <div class="demo"></div>
  </div>
</div>

<br>

<div>
  <div class="seen" onclick=" discount(this)">
    <div class="Total">&#x20B9;7,978</div>
    <div class="DiscPrice">&#x20B9;3,999</div>
    <div class="demo"></div>
  </div>
</div>

your code seems to work fine . And easy to recognize . So again thanks a lot — , Aug 27 '21 at 09:23

Is there any way in JS to select only specific tag elements

3 Answers3

Edit