here's the code
<h1>Timeworn Kumbhiraskin Maps</h1>
<label for="room">What chamber did you reach?</label>
<select id="room">
<option value="none">No portal</option>
<option value="first">First Chamber</option>
<option value="second">Second Chamber</option>
<option value="third">Third Chamber</option>
<option value="fourth">Fourth Chamber</option>
<option value="fifth">Final Chamber</option>
</select>
<ul id="percentages">
<li id="np">No portal: </li>
<li id="firstC">First Chamber: </li>
<li id="secondC">Second Chamber: </li>
<li id="thirdC">Third Chamber: </li>
<li id="fourthC">Fourth Chamber:</li>
<li id="fifthC">Final Chamber: </li>
</ul>
</body>
</html>
var totalMaps = 0;
var pPortal = 0;
var pFirst = 0;
var pSecond = 0;
var pThird = 0;
var pFourth = 0;
var pFifth = 0;
window.onload = function(){
document.getElementById("np").value += string(pPortal);
document.getElementById("firstC").value += string(pFirst);
document.getElementById("secondC").value += string(pSecond);
document.getElementById("thirdC").value += string(pThird);
document.getElementById("fourthC").value += string(pFourth);
document.getElementById("fifthC").value += string(pFifth);
}
Basically I'm just having trouble with the javascript. I want to display the javascript variables in the list, but it's not showing. Any help? Am I doing something wrong? I've tried a few different methods and looked online but it doesn't seem like anyone has the answer I'm looking for
If you want to convert a variable to a string you have to you the String() function (case sensitive). Also you missed the part saying innerHTML. This is working for me
<body>
<ul id="percentages">
<li id="np">No portal: </li>
<li id="firstC">First Chamber: </li>
<li id="secondC">Second Chamber: </li>
<li id="thirdC">Third Chamber: </li>
<li id="fourthC">Fourth Chamber:</li>
<li id="fifthC">Final Chamber: </li>
</ul>
</body>
<style>
body {padding: 0.5rem 1rem;}
</style>
<script>
let totalMaps = 0;
let pPortal = 0;
let pFirst = 0;
let pSecond = 0;
let pThird = 0;
let pFourth = 0;
let pFifth = 0;
window.onload = function(){
document.getElementById("np").innerHTML += String(pPortal);
document.getElementById("firstC").innerHTML += String(pFirst);
document.getElementById("secondC").innerHTML += String(pSecond);
document.getElementById("thirdC").innerHTML += String(pThird);
document.getElementById("fourthC").innerHTML += String(pFourth);
document.getElementById("fifthC").innerHTML += String(pFifth);
}
</script>
Try this
document.getElementById('np').innerHTML += pPortal;
...etc JS + operator automatically casts your number type to string in this case.