Jquery: How to highlight some numbers in bold within a numeric sequence from 0 to 99 after a click event?

Question

I have a numeric sequence from 0 to 99:

0 1 2 3 4 5 . . . 99

In this case, i'm trying to put some numbers in bold after clicking a button. For example, within a first input there is the number 2 and within a second input there is the number 99, and after clicking on a button, the number 2 and 99 are in bold as below:

0 1 2 3 4 5 . . . 99

I tried to find some similar questions, but unfortunatly i didn't find some solution to improve my script yet:

At first i'm trying with the following HTML code and a jquery script to apply this solution, but i'm not able to improve it to get the final result:

HTML code:


<input type="number" id="field1" value="2"/>
<br>
<input type="number" id="field2" value="99"/>
<br>
<button type="button" id="getBtn">show me the highlighted numbers</button>
<br>

<div id="sequence"></div>

Jquery script to call click event:

$('#getBtn').on( "click", function() {

  var field1 = $('#field1').val();
  var field2 = $('#field2').val();

// From this point, i don't know how to improve the script to display a sequence number with the highlighted numbers.

for(let i = 0;i <= 100;i++){

    console.log(i);

}

$("#sequence").html();


});

How can i improve my script to find a viable solution?

Why do you use a console.log? You should append the number into a div tag's innerText wrapping up your number inside the bold tag. E.g: "<b>" + i +"</b>" — Rinsad Ahmed
– Rinsad Ahmed, Commented Nov 28, 2023 at 3:04
Actually, I just left it as a way to consult the result through the console. — Michel Xavier
– Michel Xavier, Commented Nov 28, 2023 at 11:05

Unmitigated · Accepted Answer · 2023-11-28 03:00:53Z

2

You could create an array of strings (wrapping the number in a <strong> element when it's one of the inputs) and then join on space at the end to create the HTML.

$('#getBtn').click(function(e) {
  const vals = $('input[type=number][id^=field]').map((i, el) => el.valueAsNumber).get();
  const seq = [];
  for (let i = 0; i < 100; i++)
    seq.push(vals.includes(i) ? `<strong>${i}</strong>` : i);
  $("#sequence").html(seq.join(' '));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="field1" value="2" />
<br>
<input type="number" id="field2" value="99" />
<br>
<button type="button" id="getBtn">show me the highlighted numbers</button>
<br>
<div id="sequence"></div>

answered Nov 28, 2023 at 3:00

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

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

1 Comment

Michel Xavier Over a year ago

Thanks a lot. I will improve the script with this solution.

Collectives™ on Stack Overflow

Jquery: How to highlight some numbers in bold within a numeric sequence from 0 to 99 after a click event?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related