display the integers as an ordered list changing the background color to lightblue using a for loop

AND 0
Viewed 60

I wrote this code but how to display the integers as an ordered list changing the background color to light blue using a for loop? if you can help please do so and thanks in advance I appreciate itttt.:)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 6.14: welcome5.html -->
<!-- Using equality and relational operators. -->
<html>
    <head>
        <title>Compare Numbers</title>
        <script type="text/javascript">
            var firstNumber, // first string entered by the user
                secondNumber, // second string entered by the user
                thirdNumber, // third string entered by the user
                sum, // add the integers
                average, // add the integers, divide by 3
                product; // multiply the integers

            // enter first number from user as a string
            firstNumber = window.prompt("Enter first integer");

            // enter second number from user as a string
            secondNumber = window.prompt("Enter second integer");

            // enter third number from user as a string
            thirdNumber = window.prompt("Enter third integer");

            // convert numbers from strings to integers
            firstNumber = parseInt(firstNumber);
            secondNumber = parseInt(secondNumber);
            thirdNumber = parseInt(thirdNumber);
            findLargNum(firstNumber,secondNumber,thirdNumber);

            function findLargNum(firstNumber,secondNumber,thirdNumber){
                //determine result
                if (firstNumber > secondNumber) {
                    if(firstNumber > thirdNumber) window.alert(firstNumber + " is largest");
                }
                else if(secondNumber > thirdNumber) window.alert(secondNumber + " is largest");
                else window.alert(thirdNumber + " is largest");

                var sum =  firstNumber + secondNumber + thirdNumber;
                window.alert("the sum is " + sum); 
                var average = (firstNumber + secondNumber + thirdNumber) / 3;
                window.alert("the average is " + average);var product = firstNumber * secondNumber * thirdNumber;window.alert("the product is" + product);
            }
        </script>
    </head>
    <body>
        <h1 style = "text-align:center">Compare the Integers!</h1>
    </body>
</html> ```
javascript html
1 Answers

Forgive me if this is not the solution you are looking for, but, assuming you have an array of values, you can use the following snippet to create an ordered list and add it to the document body:

document.addEventListener('DOMContentLoaded', () => {
 var values = [15, 72, 50, 45, 12];
 var list = document.createElement('ol');
 values.forEach(value => {
  var item = document.createElement('li');
  item.innerText = value;
  list.append(item);
 });
 list.style.backgroundColor = 'lightblue';
 document.body.append(list);
});

In your case, you might add the following to your code:

var list = document.createElement('ol');
[firstNumber, secondNumber, thirdNumber].forEach(value => {
 var item = document.createElement('li');
 item.innerText = value;
 list.append(item);
});
list.style.backgroundColor = 'lightblue';
document.body.append(list);

If you specifically need a for loop, this should work:

var list = document.createElement('ol');
for(var value of [firstNumber, secondNumber, thirdNumber]) {
 var item = document.createElement('li');
 item.innerText = value;
 list.append(item);
}
list.style.backgroundColor = 'lightblue';
document.body.append(list);

Hopefully this solution is useful to you!

TGekko0
Related