Solution 1 :

Just adjust your list with the type attribute;

document.querySelector("ol").type = "I";
const items = document.querySelectorAll('#players li');
console.log(items[0], items[1], items[2]);
<section id="players">
  <h1>Players</h1>
  <ol>
    <li>Alice</li>
    <li>Bob</li>
    <li>Cesar</li>
  </ol>
</section>

Solution 2 :

You can just querySelect the parent ‘ol’ and then change it’s list style in Javascript using element.style.listStyleType = “upper-roman”. This should apply the style its child elements.

Solution 3 :

you can change type attribute of the ol tag reference

const items = document.querySelectorAll('#players li');
document.querySelector("ol").type = "i";
console.log(items[0], items[1], items[2]);
<section id="players">
  <h1>Players</h1>
  <ol>
    <li>Alice</li>
    <li>Bob</li>
    <li>Cesar</li>
  </ol>
</section>

Problem :

I have:

const items = document.querySelectorAll('#players li');
console.log(items[0], items[1], items[2]);
<section id="players">
  <h1>Players</h1>
  <ol>
    <li>Alice</li>
    <li>Bob</li>
    <li>Cesar</li>
  </ol>
</section>

Producing:

Players
    1.Alice
    2.Bob
    3.Cesar

Now I want convert the integers to Roman numerals, using javascript, externally in my javascript file, instead of setting the numerals in the HTML-file, like this:

<ol type="i">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol> 

This is my Javascript code so far, but I want to to convert the numbers to numerals:

const items = document.querySelectorAll('#players li');
console.log(items[0], items[1], items[2]);

Comments

Comment posted by CertainPerformance

What you’re logging are

Comment posted by Sowjanya R Bhat

if you just want to add

Comment posted by technophyle

I don’t know why you need to use JS for this. I recommend just setting

By

Leave a Reply

Your email address will not be published. Required fields are marked *