How to change size of button depending on div width

Question

What I am trying to do is to my button size is 35% of my div width . I add dynamically elements to my div, and in JavaScript I add attributes. So here is my 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 I create elements and add on this 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 I do next in my 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;

So here is what I tried:

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

And css on the 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 someone tell me what I am doing wrong. So to repeat my goal is if div is 100 px button should be 35px(35% of div width) and picture90px(90% of div width).

All advice and solutions are welcome. Thanks in advance.

Answer 1

i have read your code but i have not implemented it.apparently i can see 2 mistakes you are making. 1: var divWidth = document.getElementById("div2").offsetWidth + "px"; returns a string , lets say 100px and you can't divide a string with numeric value so 100px/3.2 returns undefined result.

2:document.getElementsByClassName("button-1").style doesn't work because document.getElementsByClassName returns to you an array of all the elements with specified class name. if you want to add the style onto these elements you have to loop through the array returned by this function.

You can alternatively use document.getElementById() instead and add the style to specific element.

for your first problem you could use the following approach

 var divWidth = document.getElementById("div2").offsetWidth;
 var btnWidth = divWidth * 0.35;
 //alert(btnWidth);
 document.getElementById("btn").style.width = btnWidth+"px";

Hope it helps.

Answer 2

I find out other solution so now I am using Element.getBoundingClientRect(); So if someone have same problem it can be fixed on this way. Element.getBoundingClientRect() gives to you bot,height, left, right, top and width of certain element. So example = xxx.Element.getBoundingClientRect().width;