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
Koden
Math.floor(3.14)
avrundar alltid ner till närmast mindre heltal. I ovanstående exempel till 3.
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.