HTML doesn't continue paragraph after script (Code)

Question

My code currently works how it should other than herb2 and herb3 not showing up or using the randomizer. I'm not very experienced with coding and have no idea how to make this work.

<!DOCTYPE html>
<html>
<body>
    <br>
    <p>- - - - - - - - - - - - - - -</p>
    <p>D1X (MOD1)</p>
    <p>
    EPN419<br>
        Tesla 1 (left): <span id="demo1"></span><br>
        Tesla 1 (right): <span id="demo2"></span><br>
        Tesla 2: <span id="demo3"></span><br>
        Tesla 3: <span id="demo4"></span><br>
    </p>

    <script>
        for (var x = 1; x < 4; x++) {
            document.getElementById("demo" + x).innerHTML =
            Math.floor(Math.random() * 8) + 2 + '0%';
        }
    </script>
</body>
</html

id should be unique within the document, and getElementById will return the first one it finds, so there’s no expectation here that all three elements would be modified. — ray
– ray, Commented Sep 15, 2022 at 23:59
You're not closing the a tag and the id must be unique. If you want to get various elements use a class. In the script, to randomizer all elements with the same class (not id), use the querySelectorAll(".xxxx") and inside a forEach loop, you call the innerHTML. — Eudes Serpa
– Eudes Serpa, Commented Sep 16, 2022 at 0:02
I'm sure this would be all super helpful if I knew how to apply anything you guys say — ZaHecc
– ZaHecc, Commented Sep 16, 2022 at 0:26

Christian · Accepted Answer · 2022-09-16 00:43:40Z

0

When your script runs, it finds only one demo id.

Here's code that is using 3 separate IDs.

<!DOCTYPE html>
<html>
<body>
    <br>
    <p>- - - - - - - - - - - - - - -</p>
    <p>Herbs Availability</p>
    <p>
        Herb1 - <a id="demo"></a>
        Herb2 - <a id="demo1"></a>
        Herb3 - <a id="demo2"></a>
    </p>

    <script>
        document.getElementById("demo").innerHTML =
        Math.floor(Math.random() * 8) + 2 + '0%';
        document.getElementById("demo1").innerHTML =
        Math.floor(Math.random() * 8) + 2 + '0%';
        document.getElementById("demo2").innerHTML =
        Math.floor(Math.random() * 8) + 2 + '0%';
    </script>
</body>
</html

Your next learning step could be for loops to avoid repetition.

Example using a for loop (adjusted ID to demo1 to demo3), see For Loop in Javascript (document.getElementById)

<!DOCTYPE html>
<html>
<body>
    <br>
    <p>- - - - - - - - - - - - - - -</p>
    <p>Herbs Availability</p>
    <p>
        Herb1 - <a id="demo1"></a>
        Herb2 - <a id="demo2"></a>
        Herb3 - <a id="demo3"></a>
    </p>

    <script>
        for (var x = 1; x < 4; x++) {
            document.getElementById("demo" + x).innerHTML =
            Math.floor(Math.random() * 8) + 2 + '0%';
        }
    </script>
</body>
</html

edited Sep 16, 2022 at 0:43

answered Sep 16, 2022 at 0:16

Christian

5,6724 gold badges30 silver badges45 bronze badges

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

6 Comments

ZaHecc Over a year ago

How would this look if a loop was used?

Christian Over a year ago

See updated post

Christian Over a year ago

Out of interest: Why do you use <a> instead of <p> or <span>?

ZaHecc Over a year ago

I have no idea what I'm doing tbh, I just was trying to use something that wasn't going to force a line break

ZaHecc Over a year ago

The loop one is more what I'm looking for. I added <br> after each </a> to make a new line after each %. I tried to add more herbs but it didn't create a percent for them. How could I add more to this?

|

Collectives™ on Stack Overflow

HTML doesn't continue paragraph after script (Code)

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related