Switch to JS maximum HTML preview bar value

Asked

Viewed 407 times

0

well suppose I have a Progress bar in html and I have a script that as I click on a certain object the value of the Progress increases by +1 , as I would for when this value reaches 10 the maximum value of the bar increases to 100 ?

<progress id="pg" value="0" max="10" ></progress>

$('#store').click(function () {

        click++;
        document.getElementById('pg').value = click;


    });
javascript jquery html

1 answer

2


Understood that you want to increase the max attribute, so I put a label to inform the value of it, the "size" of the bar in html will be kept the same right? I will consider that yes, then follows below an example of how it looks.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Exemplo utilizando socket.io</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    <script type="text/javascript" src="js/js_1.9/jquery-1.8.2.js"></script>  
    <script type="text/javascript" src="js/js_1.9/jquery-ui-1.9.1.custom.min.js"></script>  
    
    <style type="text/css"> h2 { color: #439; font-size: 120%;} </style> 
</head>
<body>    
    <progress id="pg" value="0" max="10" ></progress>    
    <label id="max">max: 10</label>
    <button id="store">+</button>
</body>
<script>
    $('#store').click(function () {
        var valor = parseInt( $('#pg').val() );
        valor++;
        console.log('valor=' + valor);
        
        $('#pg').val( valor );
        if( valor == $('#pg').attr('max') ){
            $('#pg').attr('max','100');
            $('#max').text('Max: 100');
        }


    });
</script>  
</html>

  • Thank you very much my friend, helped me very, grateful !

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.