adinan-cenci/updating-a-progress-bar.html

## updating-a-progress-bar.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    function onClick(e)
    {
        var x, width, perc;

        x               = e.clientX - this.offsetLeft;
        width           = this.offsetWidth;
        perc            = Math.ceil((x / width) * 100);

        this.value = perc;
    }

    document.addEventListener('DOMContentLoaded', function()
    {
        document.getElementById('progress-bar').addEventListener('click', onClick);
    });
    </script>
</head>
<body>
    <progress id="progress-bar" value="0" max="100"></progress>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	function onClick(e)
	{
	var x, width, perc;

	x = e.clientX - this.offsetLeft;
	width = this.offsetWidth;
	perc = Math.ceil((x / width) * 100);

	this.value = perc;
	}

	document.addEventListener('DOMContentLoaded', function()
	{
	document.getElementById('progress-bar').addEventListener('click', onClick);
	});
	</script>
	</head>
	<body>
	<progress id="progress-bar" value="0" max="100"></progress>
	</body>
	</html>