Ian Ian - 2 months ago 12
CSS Question

Debugging an XP bar

I've been working awhile on making this code, but I can't seem to make it work like I want it to. I wanted a prompt to come up, ask for how long you've worked on a topic, then give the correct width on the progress bar.

Edit: widthGenerator creates the popup, but I can't seem to have the variable width in widthGenerator() transfer to Move() as Move's width.

Here is my code:

<body class="w3-container">
<div class="w3-progress-container w3-round-xlarge">
<div id="myBar" class="w3-progressbar w3-round-xlarge" style="width:1%"></div>
</div>

<button class="w3-btn" onclick="move()">Click Me</button>

<script>
function widthGenerator() {
var question = prompt("Enter number of hours worked:", "Enter here");
if (isNaN(question) == false) {
var width = (question * 2.33463);
break;
} else if (isNaN(question) == true) {
question = prompt("That is not a number; Enter the number of hours worked:", "Enter here");
break;
};
}
function move() {
var elem = document.getElementById("myBar");
var id = setInterval(frame, 1);
var width = widthGenerator()
function frame() {
if (width >= widthGenerator()) {
clearInterval(id);
} else {
width += 0.1;
elem.style.width = width + '%';
}
}
}
</script>

Answer

You need a return statement in your widthGenerator() function:

function widthGenerator() {

    var question = prompt("Enter number of hours worked:", "Enter here");
    if (!isNaN(Number(question))) {
        var width = (question * 2.33463);
    } else {
        question = prompt("That is not a number; Enter the number of hours worked:", "Enter here");
    }

    return width;
}

I didn't want to tinker too much with your code but note that it is possible the user will never enter a number based on how widthGenerator() is written.