Javascript - set value attribute of progress element on javascript click event

Question

I have a form tag with a progress tag and three submit as following:

<form>
    <progress min="0" max="100" value="0"></progress>
    <input type="submit" value="submit1">
    <input type="submit" value="submit2">
    <input type="submit" value="submit3">
</form>

I have a little js code which listens click event and changes the value of progress bar.

;(function(){
    document.body.addEventListener('click', function(){
        var p = document.querySelector('progress');
        var s = document.querySelector('input');
        var val;
        if(s.value=="submit1"){
            val=33;
        }
        if(s.value=="submit2"){
            val=66;
        }
        if(s.value=="submit3"){
            val=100;
        }
        p.value=val;
    }, false);
}());

But the progress bar is not working as expected.

Any point where I can solve this?

Answer 1

About document.querySelector:

Returns the first element within the document (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.

So, the code always will return "submit1", because it is the first element in the document. Also form's submit make callback to the page, and you can't see the changes, because the code will return to initial stage. If you doesn't want to do the callback, just change inputs types to "button". Also, I offer you to attach onclick event to each button and call functionality that you want.

EDIT: The worked code bellow.

<form>
        <progress min="0" max="100" value="0" id="progressBar1"></progress>
        <input type="button" value="submit1" onclick="SubmitProgress(33);" />
        <input type="button" value="submit2" onclick="SubmitProgress(66);" />
        <input type="button" value="submit3" onclick="SubmitProgress(100);" />
    </form>
    <script type='text/javascript'>
        function SubmitProgress(valueToSet) {
            document.getElementById("progressBar1").value = valueToSet;
        }
    </script>

Answer 2

In your javascript - a typo might is what killed the script. Instead of using

;(function(){ 

Use this:

$(function(){