javascript - How to change size of button depending on div width -

what trying button size 35% of div width. add dynamically elements div, , in javascript add attributes. here div in .js file:

var div2= document.createelement('div');   div2.classname = "div2" ; div2.id = "div2"; div2.style.color= buttoncolor; div2.style.height = buttonheight; div2.style.width = buttonwidth; div2.style.backgroundcolor = backgroundcolor;  

then create elements , add on way:

 div2.appendchild(h2) + "\n";  div2.appendchild(linebreak);   div2.appendchild(pic) + "\n";  div2.appendchild(linebreak);     var parentdiv = document.getelementbyid("surveybot-button");  var sp2 = document.getelementbyid("surveybot-link");  parentdiv.insertbefore(div2,sp2);  div2.appendchild(linebreak);  div2.appendchild(sp2); 

then next in index.php

<div id="surveybot-button"> <a id="surveybot-link" class="button-1" href="https://gosurveybot.com/liberty-moving-video-chat-estimate/">schedule virtual estimate usign surveybot</a><br>  </div>  <script id="buttons-script" src="button.js" button-variant="<img src='img/button-icons-2.png'>" button-color="green" button-width="600px" button-height="355px" background-color="#11ff11">  </script> <script>  var divwidth = document.getelementbyid("div2").offsetwidth + "px"; var divheight = document.getelementbyid("div2").offsetheight + 'px'; alert(divwidth); alert(divheight); document.getelementsbyclassname("button-1").style.width = divwidth / 3.2 + "%"; //document.getelementsbyclassname("button-1").style.width = divwidth - 100px; 

here tried:

document.getelementsbyclassname("button-1").style.width = divwidth / 3.2 + "%";<br> document.getelementsbyclassname("button-1").style.width = divwidth * 0.3; 

and css on end:

a.button-1 { width: 300px; height: 100px; background: url(img/button-button-1.png) top center no-repeat; background-size: 100% auto; text-indent: -999999px; color: transparent; float: left; cursor: pointer; position: absolute; } 

so can tell me doing wrong. repeat goal if div 100 px button should 35px(35% of div width) , picture90px(90% of div width).

all advice , solutions welcome. in advance.

i have read code have not implemented it.apparently can see 2 mistakes making. 1: var divwidth = document.getelementbyid("div2").offsetwidth + "px"; returns string , lets 100px , can't divide string numeric value 100px/3.2 returns undefined result.

2:document.getelementsbyclassname("button-1").style doesn't work because document.getelementsbyclassname returns array of elements specified class name. if want add style onto these elements have loop through array returned function.

you can alternatively use document.getelementbyid() instead , add style specific element.

for first problem use following approach

 var divwidth = document.getelementbyid("div2").offsetwidth;  var btnwidth = divwidth * 0.35;  //alert(btnwidth);  document.getelementbyid("btn").style.width = btnwidth+"px"; 

hope helps.