Javascript: How to display only the highest "score" accoriding to the content inside each div?

Design help Custom code
1

Hi there, I would like to archive the below by using javascript.
But have no clue about it yet… :sweat_smile:
It would be great if anyone have the idea.

Here is the HTML structure:

<div class="score-set">
  <div class="score-item">A<div id="score">96+</div></div>
  <div class="score-item">B<div id="score">99</div></div>
  <div class="score-item">C<div id="score">99</div></div>
  <div class="score-item">D<div id="score">96-</div></div>
</div>
<div class="score-set">
  <div class="score-item">A<div id="score">86</div></div>
  <div class="score-item">B<div id="score">88</div></div>
  <div class="score-item">C<div id="score">90</div></div>
  <div class="score-item">D<div id="score">90+</div></div>
</div>
<div class="score-set">
  <div class="score-item">A<div id="score">83-</div></div>
  <div class="score-item">B<div id="score">83+</div></div>
  <div class="score-item">C<div id="score">76</div></div>
  <div class="score-item">D<div id="score">78</div></div>
</div>

The desired result of the script will be B 99 C90 A 83- which looks like:

<div class="score-set">
  <div class="score-item">B<div id="score">99</div></div>
</div>
<div class="score-set">
  <div class="score-item">C<div id="score">90</div></div>
</div>
<div class="score-set">
  <div class="score-item">A<div id="score">83-</div></div>
</div>

The rules are:

  1. Ignore all non-number, eg. + and -, when doing the ranking.
  2. Show one highest score item.
  3. If two score items are the same in a set, show just one according to the div item sequence inside <div class="score-set">, ie. in the above example A > B > C > D.
  4. When writing the result, write the original div item, including + or -.

Thanks a lot~

2

Hi @anthonychan2509 I’ve built a CodePen for what you are looking for, please the link here https://codepen.io/abirana/pen/zYWbLXb

By the way, one main thing you should note is that, you have to convert numbers like this (99+) to integer, so for this you can use parseInt(string)

Everything is done, you just need to do a little bit of work on it.

By the way, you are using same id for all the numbers, so I’ve changed them to class.

1 Like
3

Hi @abirana That’s so cool! :raised_hands: and with the feature of highlighting the best as well!
Good idea to use parseInt!
Thanks a lot!

I did some adjustments to fit my case:
https://codepen.io/pen/mdxoxrd

1 Like
4

Amazing and always happy to help :+1: