2023 js getElementById o random

Urval av kod

body i html-koden visas

Din första div:en med id = "js-entry" är viktig för fortsättningen.

<body>
    <div id="js-entry"></div>

    <script src="element-by-id.js"></script>
</body>

filen element-by-id.js

let entry_div = document.getElementById("js-entry");

let number = Math.floor(Math.random() * 6 + 1);

entry_div.innerHTML += "<p>Tärningen visar:</p>";
entry_div.innerHTML += "<p>" + number + "</p>";
entry_div.innerHTML += "<p>Ladda om sidan för att kasta tärningen</p>";

förklaring av JavaScriptkoden ovan

Koden

document.getElementById("js-entry");

hämta element i html-dokumentet som detta skript körs på. Mer precist hämta elementet med angivet id.

Mer om document.getElementById()

Koden

Math.radom()

ger slumptal som är 0.0 till nästan 1.0

Mer om Math.radom()

Koden

Math.floor(3.14)

avrundar alltid ner till närmast mindre heltal. I ovanstående exempel till 3.

Mer om Math.floor()

Koden

Math.floor(Math.random() * 6 + 1);

ger ett av talen 1, 2, 3, 4, 5 eller 6.

Koden

entry_div.innerHTML += "<p>Tärningen visar:</p>";

lägger till text i valt html.element.

Mer om Element.innerHTML på Mozilla Developer Network.

Uppgifter

1. En fyrsidig tärning

Ändra så att tärningen blir fyrsidig och visar ett av talen 1, 2, 3 och 4.

2. Tre fyrsidiga tärningar

Ändra så att tre tärningar kastas samtidigt.