I'm making an engineering simulator, and I want to be able to have multiple things you can choose from. On the first page, I have radio buttons:
<div id="radiobuttons" class="container" name="buttons" align=center>
<h2>I Want my Building to be Made of:</h2>
<ul>
<li>
<input type="radio" id="brick-option" name="material" value="1" onClick="choose('Bricks')">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3" onClick="choose('Wood')">
<label for="wood-option">Wood</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" id="stone-option" name="material" value="2" onClick="choose('Stone')">
<label for="stone-option">Stone</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
Then, on the second page, I want to have a slider:
<main>
<form oninput="output.value = Math.round(range.valueAsNumber / 1)">
<h2>
Choose the Height of Your Building
</h2>
<div class="range">
<input name="range" type="range" min="0" max="100" onchange="rangeValue=this.value;my2Function()">
<div class="range-output">
<output id="output" class="output" name="output" for="range">
50
</output>
</div>
</div>
</form>
</main>
I want both pages to affect the same variable, chanceofdeath
. I would think that you use localStorage
, but I'm not sure, and I don't know how to do it. Can you give me a few lines of code?
You can store value of chanceofdeath
variable like this:
localStorage.setItem("chanceofdeath", chanceofdeath);
Then you can get value like this:
var value = localStorage.getItem("chanceofdeath");
Here is a little example:jsfiddle
To see localStorage
content please follow these steps:
F12
.2)Click on the Application
tab and you will see localStorage's
content.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With