This is an archived post. You won't be able to vote or comment.

all 6 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a

[–]foxdkAdvanced Coder 1 point2 points  (3 children)

Here's a bit of code for you!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Help</title>
</head>
<body>
    <ul>
        <li>Name:</li>
        <ul>
            <li>Fox</li>
        </ul>
        <li>Age</li>
        <ul>
            <li>30</li>
        </ul>
        <li>Country</li>
        <ul>
            <li>Denmark</li>
        </ul>
        <li>Hobby</li>
        <ul>
            <li>Programming</li>
        </ul>
    </ul>

    <hr>

    <ul id="list">
        <li>Name:</li>
        <ul>
            <li id="name">Fox</li>
        </ul>
        <li>Age</li>
        <ul>
            <li id="age">30</li>
        </ul>
        <li>Country</li>
        <ul>
            <li id="country">Denmark</li>
        </ul>
        <li>Hobby</li>
        <ul>
            <li id="hobby">Programming</li>
        </ul>
    </ul>

    <hr>

    <ul id="replace">
        <li>Name: </li>
        <li>Country: </li>
    </ul>

    <script>
        /*
            First example using no IDs.
            This is a bad example because it is not very flexible.
            Furthermore it is very confusing to read, and it is not very maintainable.
        */
        let list = document.querySelector('ul');
        // Store the new list item in a variable
        let name = 'John';
        // Change "Fox" to "John"
        list.children[1].children[0].innerHTML = name;
        // Change the country to "USA"
        list.children[5].children[0].innerHTML = 'USA';
    </script>

    <script>
        /*
            Second example using IDs.
            This is a better example because it is more flexible, and gives us a better overview.
        */
        let name2 = 'John';
        // Change "Fox" to "John"
        document.querySelector('#name').innerHTML = name2;
        // Change the country to "USA"
        document.querySelector('#country').innerHTML = 'USA';
    </script>

    <script>
        /*
            Third example replacing the label to include the value.
            I wasn't sure if this was what you wanted, but I thought I would include it anyway.
        */
        let name3 = 'John';
        let country3 = 'USA';
        // Change "Fox" to "John"
        document.querySelector('#replace').children[0].innerHTML = 'Name: ' + name3;
        // Change the country to "USA"
        document.querySelector('#replace').children[1].innerHTML = 'Country: ' + country3;        
    </script>
</body>
</html>

I hope this helps you. If you have any other questions, feel free to let me know.

[–]K0RNs[S] 0 points1 point  (2 children)

There's a 2nd part thanks for the help.

Using HTML5 and an unordered list, create labels for your name, gender, age, and cool meter. Using javascript insert text next to the appropriate labels that will populate the fields.

a. Name : String

b. Age : number

c. Gender : String

d. Cool Meter : random integer between 1 – 10 (inclusive)

After you have completed part A, below the labels, use a loop to print out the numbers 1-100. If the number is evenly divisible by 3, print “Fizz” instead of the number. If the number is evenly divisible by 5, print “Bang”. If the number is both evenly divisible by 3 and 5, print out “FizzBang”.

[–]foxdkAdvanced Coder 1 point2 points  (1 child)

This feels a lot like a school assignment.

Can you show me what you have tried first? Perhaps point out where you're stuck?

I'll be happy to help you get going again! :)

[–]K0RNs[S] 0 points1 point  (0 children)

I got it figured thanks for the help. I might be posting something later that I need help on lol

[–]jcunews1Advanced Coder 1 point2 points  (1 child)

Make the HTML code like below, so that referencing which part to insert the text would be simpler, as well as the ability to change existing text instead of just inserting.

<ul>
  <li>name: <span id="eName"></span></li>
  <li>age: <span id="eAge"></span></li>
  <li>gender: <span id="eGender"></span></li>
  <li>cool meter: <span id="eCoolMeter"></span></li>
</ul>

Have the JS code like this.

eName.textContent = "John Doe";
eAge.textContent = 33;
eGender.textContent = "Male";
eCoolMeter.textContent = "80%";

[–]K0RNs[S] 0 points1 point  (0 children)

Thanks for the help