2

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]);
Improve this question
4
  • What you're logging are elements, which don't have the leading numbers in their text Commented May 26, 2020 at 16:30
  • 2
    if you just want to add type="i" the code is : document.querySelector('#players ol').setAttribute('type', 'i') Commented May 26, 2020 at 16:33
  • 1
    I don't know why you need to use JS for this. I recommend just setting list-style-type to upper-roman in CSS. Commented May 26, 2020 at 16:36
  • You're right. How do I set the a specific list element, ie the third one to be displayed in a specific color?(Using the style property to set the css property color to set it's value so it turns red?(c#00) Commented May 26, 2020 at 16:51

3 Answers 3

Reset to default
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>

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

Comments

0

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.

Improve this answer

Comments

0

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>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.