javascript function does not execute, works only in console

Question

I'm trying to manipulate css values using jquery. I want to add width to .block, using the value of it's child element.

Function doesn't work when page is loaded, but if I run it on console (chrome-dev); it works.

Here's my code:

$(document).ready(function() {
  $('.gauge').each(function() {
    var text = $(this).text();
    $(this).parent().css('width', text);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="wrap"><span class="gauge ">70%</span></span>
    <span class="wrap"><span class=" gauge ">20%</span></span>
    <span class="wrap"><span class=" gauge ">10%</span></span>
  </li>
</ul>

Probably running js before page renders

Chris Li
– Chris Li

2019-12-12 14:39:27 +00:00
Commented Dec 12, 2019 at 14:39 — Chris Li
– Chris Li, Commented Dec 12, 2019 at 14:39

leonheess · Accepted Answer · 2019-12-12 15:09:41Z

It seems to be working well if you set the parents to display: block:

$(document).ready(function () {
  $('.gauge').each(function () {
    var text = $(this).text();
    $(this).parent().css('width', text);
  }); 
});

ul {
  padding: 0px;
  margin: 0px;
  display: block;
}

ul li {
  list-style: none;
  display: block;
}

.wrap {
  display: block;
  width: 100%;
  height: 30px;
  background-color: #FEFEFE;
  margin-bottom: 10px;
}
.wrap .gauge {
  display: block;
  color: white;
  padding: 5px;
  font-size: 12px;
  line-height: 20px;
}
.wrap:nth-child(1) .gauge {
  background-color: red;
}
.wrap:nth-child(2) .gauge {
  background-color: blue;
}
.wrap:nth-child(3) .gauge {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="wrap"><span class="gauge ">70%</span></span>
    <span class="wrap"><span class=" gauge ">20%</span></span>
    <span class="wrap"><span class=" gauge ">10%</span></span>
  </li>
</ul>

Adder · Accepted Answer · 2019-12-12 15:20:59Z

0

spans don't have a width. It works when using floating divs.

$(document).ready(function() {
  $('.gauge').each(function() {
    var text = $(this).text();
    $(this).parent().css('width', text);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="wrap" style="float:left;"><span class="gauge ">70%</span></div>
    <div class="wrap" style="float:left;"><span class=" gauge ">20%</span></div>
    <div class="wrap" style="float:left;"><span class=" gauge ">10%</span></div>
  </li>
</ul>

answered Dec 12, 2019 at 15:20

Adder

5,8982 gold badges35 silver badges60 bronze badges

Collectives™ on Stack Overflow

javascript function does not execute, works only in console

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related