Search code examples
javascripthtmlarrayswidthdisplay

Best ways to display width of multiple elements as text

Hi I'm looking at ways to specify the widths of a large number of objects on a page AND have each object's width displayed within it as text. The main aim is to avoid having a reference to the width anywhere (whether in the HTML, CSS or JS) more than once but I need potentially thousands of these objects on one page (currently I specify the width of the div and a text within it - too inefficient!).

So far I have this: https://jsfiddle.net/ghostfood/d6acdhq6/17/

<body onLoad="myFunction()">
<div id="object1" class="voteshare1" style="width:40.6%;">
This one is <span id="percentage1"></span></div>
<div id="object2" class="voteshare2" style="width:20.4%;">
This one is <span id="percentage2"></span></div>
<div id="object3" class="voteshare3" style="width:10.2%;">
This one is <span id="percentage3"></span></div>

<script>
function myFunction() {
var x1 = document.getElementById("object1").style.width;
var x2 = document.getElementById("object2").style.width;
var x3 = document.getElementById("object3").style.width;
document.getElementById("percentage1").innerHTML = x1;
document.getElementById("percentage2").innerHTML = x2;
document.getElementById("percentage3").innerHTML = x3;
}
</script>
</body>

The width must be a percentage but ideally would not include the percentage symbol in the displayed text (not sure how it's doing that as this is an example I found online then modified a bit - I do not know JS very well).

I've looked at D3 and amcharts for this briefly but I'm not sure they're best for handling hundreds of small stacked bar charts on one page and with lots of CSS control which is what I need. I may well be wrong!

Summary: Help me figure out a more efficient way of getting and displaying the (percentage) width (as set manually in HTML or JS and within a range of 10% to 100%) of an object within it as text (the caveat being that I need to do this for thousands of small objects on one page).

Solution

  • Set a common class to all divs that you want to get the width.
    Select all of then with getElementsByClassName()
    Loop through each one getting its width.
    find the children span and add the string to it.
    See below 

    function myFunction() {
  var elements = document.getElementsByClassName("voteshare");
  for (var i = 0; i <  elements.length; i++){
    var thisElement = elements[i];
    var thisWidth = thisElement.style.width.toString();
    thisElement.children[0].textContent += thisWidth;
  }
}
    <body onLoad="myFunction()">
<div id="object1" class="voteshare" style="width:40.6%;"> 
  <span id="percentage1">This one is </span>
</div>
<div id="object2" class="voteshare" style="width:20.4%;">
  <span id="percentage2">This one is </span>
</div>
<div id="object3" class="voteshare" style="width:10.2%;">            
  <span id="percentage3">This one is </span>
</div>
</body>