FreeCodeCamp/HelpJavaScript

Get help on our basic JavaScript and Algorithms Challenges. If you are posting code that is large use Gist - https://gist.github.com/ paste the link here.

Tiago Correia

@tiagocorreiaalmeida

<span><a class="progress" progress="75"></a></span>
<span><a class="progress" progress="65"></a></span>
<span><a class="progress" progress="75"></a></span>

how can I loop all that spans

and get the value of every one of them 1 by 1?

the code I have only runs the first 1

Diego Mayer

@Chrono79

@tiagocorreiaalmeida try storing all the class progress anchors in an array and then use a loop

Tiago Correia

@tiagocorreiaalmeida

yeah my problem is how can I store everyone of them?

Diego Mayer

@Chrono79

getElementByClassName https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Tiago Correia

@tiagocorreiaalmeida

that's the problem I would have to name 1 by one?

class

per each

Ronique Ricketts

@RoniqueRicketts

I just found out w3schools has a nodejs class. :O

Tiago Correia

@tiagocorreiaalmeida

To search for multiple class names, separate them with spaces, like "test demo".

Diego Mayer

@Chrono79

use map or forEach @tiagocorreiaalmeida

Adel

@AdelMahjoub

@tiagocorreiaalmeida

window.addEventListener('DOMContentLoaded', function() {
  var progress = document.querySelectorAll('.progress');

  progress.forEach(function(percentage) {
    console.log(percentage.getAttribute('progress'))
  });
});

Jason Luboff

@JLuboff

@AdelMahjoub Coming out of the shadows of backend eh?

Adel

@AdelMahjoub

@JLuboff lol

@JLuboff got me :smile:

Jason Luboff

@JLuboff

Adel

@AdelMahjoub

I 'm sneaking in all the fcc gitter channels

this one is the most active, after the main channel

Jason Luboff

@JLuboff

I can't stand the main channel

Adel

@AdelMahjoub

yeah hard to follow

Adel

@AdelMahjoub

@tiagocorreiaalmeida

$(document ).ready(function() {
  var progress = $(".progress");
  progress.each(function() {
    console.log($(this).attr("progress"))
  })
});

Tiago Correia

@tiagocorreiaalmeida

    var percentage = document.getElementsByClassName("progress")
    for(var i = 0; i<percentage.length; i++){
      $("."+percentage[i].getAttribute('class')).css("width",percentage[i].getAttribute('progress')+"%");
    }

shouldnt this work?

Adel

@AdelMahjoub

@tiagocorreiaalmeida what do you want to do ?

Tiago Correia

@tiagocorreiaalmeida

I have like 3 or 4 spans

and their width

will grow based

on a attribute

that called progress

so if progress 75 width of the div will be 75

Adel

@AdelMahjoub

@tiagocorreiaalmeida ah you want a progress bar based on theese value

Tiago Correia

@tiagocorreiaalmeida

yeah that's it

since I can use the width for it

I do .css width

Tiago Correia

@tiagocorreiaalmeida

@AdelMahjoub any idea?

Adel

@AdelMahjoub

@tiagocorreiaalmeida you want those same spans to get a width or you want a real progress bar ?

@tiagocorreiaalmeida first you need a height for those spans, span is an inline element,

@tiagocorreiaalmeida or set them to display block, in any case they need a height and a background color

Tiago Correia

@tiagocorreiaalmeida

that's all defined mate

I only need to pick the attribute progress

and set the width of each span to that the progress value

Adel

@AdelMahjoub

@tiagocorreiaalmeida idk if this fits what you need https://jsbin.com/jexehuxize/edit?html,css,js,output

@tiagocorreiaalmeida the width of each span is set equal to that progress value

Tiago Correia

@tiagocorreiaalmeida

exactly big thanks mate

Adel

@AdelMahjoub

@tiagocorreiaalmeida

/*
CSS
*/
.progress {
    height: 20px;
    width: 0;
    margin-bottom: 5px;
    background-color: brown;
    display: block;
    transition: width 1s;
  }
/*
JS
*/
window.addEventListener('DOMContentLoaded', function() {
  var progress = document.querySelectorAll('.progress');

  progress.forEach(function(element) {
    var percentage = element.getAttribute('progress')
    element.style.width = percentage + 'px';
  });
});

intcreate

@intcreate

How can i make the earth spin/rotate? https://jsfiddle.net/La3qbr0v/

Where communities thrive

People

Repo info

Activity