How to change onclick attribute on html file?

Question

I have a progress bar and want to change it's data-pro-bar-percent attribute value from 80 to 100 when I click a link.

The attribute change should be as follows: data-pro-bar-percent="80" --> data-pro-bar-percent="100"

This is the HTML:

<a class="button" href="#">Click Link</a>
<div class="pro-bar-container color-green-sea">
    <div class="pro-bar bar-100 color-turquoise" data-pro-bar-percent="30" data-pro-bar-delay="4000">
        <div class="pro-bar-candy candy-ltr"></div>
    </div>
</div>

You're going to need jQuery's attr() if you're using jQuery. — ArtOfCode
– ArtOfCode, Commented Jun 20, 2014 at 15:26
Be sure to give that <a> tag an ID to be able to select it properly in Javascript. — Kodlee Yin
– Kodlee Yin, Commented Jun 20, 2014 at 15:29
Will the percent always change from 80 to 100, or are those just sample starting and ending amounts? — Taylor714
– Taylor714, Commented Jun 20, 2014 at 15:31
@Joe Confusion will arise when more than one element contains the class button. Just a foresight into what may happen. — Kodlee Yin
– Kodlee Yin, Commented Jun 20, 2014 at 15:32

Sterling Archer · Accepted Answer · 2014-06-20 15:40:06Z

5

Links are not buttons! Use buttons!

Use the DOM's setAttribute method to alter the data attribute. This is tricky though, you can either grab the percent element by its classname (if it shares a class name with another element, you may want to use this.children.children.setAttribute()) so grab the closest nested child you want.

Simply set the link/button element an eventListener (if it's in a form, a button acts like a submit button by default, so you may need to prevent the default action), and give it a function to change the data attribute.

<button id="myButton">Click Me</button>

var button = document.getElementById("myButton");
button.addEventListener("click",function() {
    document.getElementsByClassName("pro-bar")[0].setAttribute("data-pro-bar-percent","100");
}, false);

As @rlemon commented, getElementsByClassName lacks the support that querySelector does, so you should use that instead.

document.querySelector(".pro-bar").setAttribute("data-pro-bar-percent","100");

edited Jun 20, 2014 at 15:40

answered Jun 20, 2014 at 15:32

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rlemon Over a year ago

QSA has better support over getElementsByClassName FYI. The performance his is negligible. and if you only need the first match querySelector and you don't need the [0]

Adjit · Accepted Answer · 2014-06-20 15:32:06Z

2

You should use .data() instead of .attr() to get the current data value and then set it as well. Much more efficient.

http://api.jquery.com/data/

$('.button').on('click', function(){
    var current = $('.pro-bar').data("pro-bar-percent");
    $('.pro-bar').data("pro-bar-percent", current += 20);
});

answered Jun 20, 2014 at 15:32

Adjit

10.3k13 gold badges57 silver badges102 bronze badges

1 Comment

webketje Over a year ago

+1 The data attribute in this case is indeed more appropriate than a generic class

Ansuraj Khadanga · Accepted Answer · 2014-06-20 15:39:59Z

2

You can use jQuery, first give an id to your link:

<a class="button" id="btnLink" href="#">Click Link</a>

Now, use this, if you directly want to change the value of data-pro-bar-percent to 100.

$("#btnLink").on("click",function(){ 
    $(".pro-bar .bar-100 .color-turquoise").attr("data-pro-bar-percent","100");
});

If you just want to increment the value of the current bar by 20 then use this:

$("#btnLink").on("click",function(){ 
    var targetEle = $(".pro-bar .bar-100 .color-turquoise");
    var currentBar = parseInt(targetEle.attr("data-pro-bar-percent"))+20; // whatever value you want to increment with.

    targetEle.attr("data-pro-bar-percent",currentBar);
});

Hope this helps

edited Jun 20, 2014 at 15:39

answered Jun 20, 2014 at 15:32

Ansuraj Khadanga

1286 bronze badges

Collectives™ on Stack Overflow

How to change onclick attribute on html file?

3 Answers 3

1 Comment

http://api.jquery.com/data/

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related