html - Issue with getting a style setting from javascript -
so trying each time button pressed circle gets wider. have ran peculiar issue, block of code when put in alert() method shows properly, shows nul if put variable display it. here 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 save 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 comment doesnt thsi make 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 section in progress
this should work 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 shows alert nan. how can width of div saved variable (preferably in string format)?
javascripts element.style returns inline styles, not styles set in stylesheets or style tags, document.getelementbyid("circle").style.width returns nothing, empty string, , parsing integer returns nan (not number).
using getcomputedstyle 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);
Comments
Post a Comment