Ershad Qaderi Ershad Qaderi - 6 months ago 8
Javascript Question

Using JavaScript, how do you get elements with a specific className that's inside another element by using getElementByClassName?

Hi stackoverflow experts, I have this problem/question, please help me here.

I have this code; the HTML is software generated so it's not very efficient I know, we don't have to worry about that. I want to write the jQuery part completely in JavaScript, I don't want to use jQuery, just plain JavaScript. How can I do it?



$(".skillbar-container").each(function() {

var x = $(this).find(".skillbar-percent").html();
x = x.replace(/\s+/g, '');

$(this).find(".skillbar-bar").width(x + "%");
});

.skillbar-container {
margin-bottom: 24px;
}
.skillbar-texts {
margin-bottom: 6px;
font-size: 15px;
}
.skillbar-title {
display: inline-block;
float: left;
text-transform: capitalize;
}
.percent-mark {
display: inline;
float: right;
}
.skillbar-percent {
display: inline-block;
float: right;
}
.skillbar {
height: 3px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
background-color: red;
overflow: hidden;
}
.skillbar-bar {
width: 63%;
height: 100%;
background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skillbars">

<div class="skillbar-container team-skillbar">
<div class="skillbar-texts">

<div class="skillbar-title">
Sales Management
</div>

<div class="percent-mark">
%
</div>

<div class="skillbar-percent wf-affected">
76
</div>

</div>

<div class="skillbar">
<div class="skillbar-bar">
</div>
</div>

</div>

<div class="skillbar-container team-skillbar">
<div class="skillbar-texts">

<div class="skillbar-title">
Sales Management
</div>

<div class="percent-mark">
%
</div>

<div class="skillbar-percent wf-affected">
15
</div>

</div>
<div class="skillbar">
<div class="skillbar-bar">
</div>
</div>
</div>
</div>





This is my attempt:

function myFunction() {
var x = document.getElementsByClassName("skillbar-container");
var i;
for (i = 0; i < x.length; i++) {
var y = x[i].getElementsByClassName("skillbar-percent").innerHTML;
var z = x[i].getElementsByClassName("skillbar-bar");
z.style.width = y + '%';
}
}
myFunction();


But it doesn't work, apparently this:
document.getElementsByClassName("skillbar-container")getElementsByClassName("skillbar-bar");
won't work, querySelector is not supported yet too.

So what should I do?

I really appreciate the help

Answer
  1. Collected the 2 classes into NodeLists
  2. Converted the 2 NodeLists into arrays.
  3. Iterated through 2 for loops (one nested within the other)
  4. On the first loop, the text from percent was extracted (didn't need regex)
  5. Made sure it'll be a number with parseInt
  6. Stored that number in an array stats[]
  7. On the second loop, used the corresponding index of stats[j]to be the new width of the corresponding bar.
  8. Added a few more bars because it's fun. :P

SNIPPET

var skBar = document.getElementsByClassName('skillbar-bar');
var skPer = document.getElementsByClassName('skillbar-percent');
var barArr = Array.prototype.slice.call(skBar);
var perArr = Array.prototype.slice.call(skPer);
var i;
var j;
var stats = [];

for (i = 0; i < perArr.length; i++) {
  var x = perArr[i].textContent;
  x = parseInt(x, 10);
  stats.push(x);
  console.log('percent: '+x);
  
  for (j = 0; j < barArr.length; j++) {
    var y = stats[j];
    barArr[j].style.width = y + "%";
    
  }
}
.skillbar-container {
  margin-bottom: 24px;
}
.skillbar-texts {
  margin-bottom: 6px;
  font-size: 15px;
}
.skillbar-title {
  display: inline-block;
  float: left;
  text-transform: capitalize;
}
.percent-mark {
  display: inline;
  float: right;
}
.skillbar-percent {
  display: inline-block;
  float: right;
}
.skillbar {
  height: 3px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  background-color: red;
  overflow: hidden;
}
.skillbar-bar {
  height: 100%;
  background-color: blue;
}
<!-- Results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<div class="skillbars">

  <div class="skillbar-container team-skillbar">
    <div class="skillbar-texts">

      <div class="skillbar-title">
        Sales Management
      </div>

      <div class="percent-mark">
        %
      </div>

      <div class="skillbar-percent wf-affected">
        76
      </div>

    </div>

    <div class="skillbar">
      <div class="skillbar-bar">
      </div>
    </div>

  </div>

  <div class="skillbar-container team-skillbar">
    <div class="skillbar-texts">

      <div class="skillbar-title">
        Sales Management
      </div>

      <div class="percent-mark">
        %
      </div>

      <div class="skillbar-percent wf-affected">
        15
      </div>

    </div>
    <div class="skillbar">
      <div class="skillbar-bar">
      </div>
    </div>
  </div>
  
    <div class="skillbar-container team-skillbar">
    <div class="skillbar-texts">

      <div class="skillbar-title">
        Sales Management
      </div>

      <div class="percent-mark">
        %
      </div>

      <div class="skillbar-percent wf-affected">
        92
      </div>

    </div>

    <div class="skillbar">
      <div class="skillbar-bar">
      </div>
    </div>
      
      

  </div>
  
    <div class="skillbar-container team-skillbar">
    <div class="skillbar-texts">

      <div class="skillbar-title">
        Sales Management
      </div>

      <div class="percent-mark">
        %
      </div>

      <div class="skillbar-percent wf-affected">
        41
      </div>

    </div>

    <div class="skillbar">
      <div class="skillbar-bar">
      </div>
    </div>

  </div>
    <div class="skillbar-container team-skillbar">
    <div class="skillbar-texts">

      <div class="skillbar-title">
        Sales Management
      </div>

      <div class="percent-mark">
        %
      </div>

      <div class="skillbar-percent wf-affected">
        50
      </div>

    </div>

    <div class="skillbar">
      <div class="skillbar-bar">
      </div>
    </div>

  </div>

</div>

Comments