0

So I am trying to get it so each time a button is pressed a circle gets wider. I have ran into the most peculiar issue, their is a block of code that when you put it in an alert() method it shows properly, however it shows as nul if you put it into a variable then display it. Here is the full code.

<!doctype html>
<html>
<head>
 <title>CSS Basics</title>
 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <style>
    #circle {
        width:200px;
        height:200px;
        border-radius:200px;
        background-color:red;
    }
    </style>

</head>

<body>
    <div id="circle">asdfasdf</div>
    <button id="Saver"> Press me to save your text </button>
    <input id="Text" type="text" value="test"/>

    <script type="text/javascript">

        var divId="circle";
        var obj= document.getElementById("Saver");
        var it234 = 1;
        //THIS IS A COMMENT DOESNT THSI MAKE YOU  HAPPY
        obj.onclick=function() {

            document.getElementById("circle").innerHTML = document.getElementById("Text").value;
            it234 = parseInt(document.getElementById("circle").style.width.substring(0,3));
            //document.getElementById("circle").style.width="300px";
            alert(it234);
        }

    </script>
</body>
</html>

And here is the section in progress

This should work but doesnt

obj.onclick=function() {

            document.getElementById("circle").innerHTML = document.getElementById("Text").value;
            it234 = parseInt(document.getElementById("circle").style.width.substring(0,3));
            //document.getElementById("circle").style.width="300px";
            alert(it234);
        }

However instead of working it shows an alert with Nan. How can I get the width of this div saved into a variable (preferably in string format)?

ProgrammerInProgress
  • 88
  • 1
  • 10
  • Try using `element.offsetWidth` per [this](http://stackoverflow.com/a/294273/1108513) SO answer. – timtim17 Feb 03 '16 at 01:33
  • I could be wrong here, but I'm pretty sure if you don't have a style on an element to give it a fixed width, then style.width comes back empty. You need to give it an initial width in order for it to have a style for width. – Ryan Mann Feb 03 '16 at 01:34
  • Like @timtim17 with el.offsetWidth works. – dexhering Feb 03 '16 at 01:38

2 Answers2

4

Javascripts element.style only returns inline styles, not styles set in stylesheets or style tags, so document.getElementById("circle").style.width returns nothing, just an empty string, and parsing that to integer returns NaN (Not A Number).

Using getComputedStyle would get you the computed style instead

var divId = "circle";
var obj = document.getElementById("Saver");
var it234 = 1;

obj.addEventListener('click', function() {

    document.getElementById("circle").innerHTML = document.getElementById("Text").value;
    console.log(document.getElementById("circle").style.width)

    var elem  = document.getElementById("circle");
    var style = window.getComputedStyle(elem);
    var width = style.getPropertyValue('width');

    it234 = parseInt( width.replace(/\D/g,'') );

    alert(it234);

}, false);
adeneo
  • 312,895
  • 29
  • 395
  • 388
0

Use element.offsetWidth to get the width.

timtim17
  • 297
  • 4
  • 14
  • Note that `offsetWidth` includes borders and padding – adeneo Feb 03 '16 at 01:39
  • Is their a list somewhere that shows what name to use in javascript to get the css style variable? – ProgrammerInProgress Feb 03 '16 at 01:40
  • 1
    @ProgrammerInProgress - that depends, `offsetWidth`, `clientWidth` etc. does not return CSS styles, they return the actual computed width, including or excluding things like scrollbars, padding, margin, borders etc. To get the actual set style, you'd use `element.style` for inline styles, and `getComputedStyle` for the computed style. – adeneo Feb 03 '16 at 01:42