CODEWITHSUNDEEP
javascripthtmlcss
Taylor
Taylor

Reputation: 365

Javascript variable concatenation not working

I know there have been may related posts but for the life of me I can't seem to figure out why the script isn't implementing my variables associated value.

Here is the fiddle: https://jsfiddle.net/9s4k9449/5/

In brief:

  1. A red div is fixed at 743px wide until the width of the window gets to 734px at which point the red div's width changes to 100%.

  2. A function called getFraction() measures the width of the red div and divides it by the red divs original width of 743 to create a variable named myfraction. The result is that when the window is larger than 734px wide myfraction is equal to 1, otherwise the fraction displays as a you got it, a fraction.

  3. A blue div is contained within the red div, and is scaled using webkitTransform using myfraction's value. The result should be that when the window is greater than 734px wide the blue div is not scaled because myfraction = 1 (scale = 1.), but when the window is less than 734px the blue div scales to myfraction.

NOTES: The problem lies in the function "scale()". I believe that this issue has to do with the function not grabbing the value of myfraction; probably a concatenation mistake that I can't find. I believe this because when the variable "myfraction" is replaced with an actual number say 0.5, the entire process works perfectly (though the blue div is not scaled dynamically with the windows width the function does execute on window resize at a scale of 0.5).

Here is the code:

window.onresize = resizefunc;
    
function resizefunc(){    
  getFraction();
  scale();
}

/*This function takes the red div's current width and divides it by its original width to create a fraction */
function getFraction() {    
  var myfraction = document.getElementById("reddiv").offsetWidth / 743; 
  document.getElementById("dimensions").innerHTML = myfraction ;
}   

/*This function should take the blue div and scale it by the fraction */
function scale() {
  document.getElementById("bluediv").style.webkitTransform = 'scale(' + myfraction + ',' + myfraction + ')';
}   
.red {
  width: 743px;
  height: 380px;
  background-color: red;
  margin: auto;
}

@media screen and (max-width: 743px) {.red {width: 100%}}

#bluediv {
    background-color: blue;
    width: 400px;
    height: 380px;
    margin: auto;
}
<div style="width: 100%; height: 500px;">
  <div id="reddiv" class="red">
    <div id ="bluediv"></div>
   </div> 
   <p id="dimensions"></p> 
</div>

Upvotes: 0

Views: 72

Answers (3)

Richard Vinoth
Richard Vinoth

Reputation: 300

If i undersand your question :) I just joined two functions to just one, you can give it a try

function getFraction() {    
var myfraction = document.getElementById("reddiv").offsetWidth / 743; 
document.getElementById("dimensions").innerHTML = myfraction ;
 document.getElementById("bluediv").style.webkitTransform = 'scale(' + myfraction + ',' + myfraction + ')';
}

Upvotes: 0

Tony Chiboucas
Tony Chiboucas

Reputation: 5683

Your size() function never had the myfraction value

https://jsfiddle.net/9s4k9449/6/

window.onresize = resizefunc;

function resizefunc(){    
    scale(getFraction());
}
//This function takes the red div's current width and divides it by its original width
// to create a fraction
function getFraction() {    
    var myfraction = document.getElementById("reddiv").offsetWidth / 743; 
    document.getElementById("dimensions").innerHTML = myfraction ;
    return myfraction;
}   

//This function should take the blue div and scale it by the fraction
function scale(frac) {
    document.getElementById("bluediv").style.webkitTransform = 'scale(' + frac + ',' + frac + ')';
}

Upvotes: 1

Mojtaba
Mojtaba

Reputation: 5004

The problem is with the scope of myfraction variable. You did not global it.

window.onresize = resizefunc;
var myfraction = 0;
    
function resizefunc(){    
getFraction();
scale();
}

/*This function takes the red div's current width and divides it by its original width to create a fraction */
function getFraction() {    
myfraction = document.getElementById("reddiv").offsetWidth / 743; 
document.getElementById("dimensions").innerHTML = myfraction ;
}   

/*This function should take the blue div and scale it by the fraction */
function scale() {
 document.getElementById("bluediv").style.webkitTransform = 'scale(' + myfraction + ',' + myfraction + ')';
}
.red {
width: 743px;
height: 380px;
background-color: red;
margin: auto;}

@media screen and (max-width: 743px) {.red {width: 100%}}

#bluediv {
    background-color: blue;
    width: 400px;
    height: 380px;
    margin: auto;
    }
<div style="width: 100%; height: 500px;">
  <div id="reddiv" class="red">
    <div id ="bluediv"></div>
   </div> 
   <p id="dimensions"></p> 
</div>

Upvotes: 0

Related Questions