Setting attributes using javascript

Question

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]);

Answer 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>

Answer 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.

Answer 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>