JavaScript变量串联不起作用

Question

我知道可能有相关的文章，但是对于我来说，我似乎无法弄清楚为什么脚本没有实现与变量相关的值。

这是小提琴： https : //jsfiddle.net/9s4k9449/5/

简单来说：

1. 红色div的宽度固定为743px，直到窗口的宽度变为734px，此时红色div的宽度变为100％。

2. 名为getFraction（）的函数将测量红色div的宽度，并将其除以红色divs的原始宽度743，以创建名为myfraction的变量。 结果是，当窗口大于734px时，myfraction等于1，否则分数显示为您所获得的分数。

3. 蓝色div包含在红色div中，并使用myfraction的值使用webkitTransform进行缩放。 结果应该是，当窗口大于734px宽时，由于myfraction = 1（比例= 1），蓝色div不会缩放。但是，当窗口小于734px时，蓝色div会缩放至myfraction。

注意：问题在于函数“ scale（）”。 我认为，此问题与不获取myfraction值的功能有关。 可能是我找不到的串联错误。 我相信这是因为，当变量“ myfraction”被替换为实际数字（例如0.5）时，整个过程运行良好（尽管blue div不会随窗口宽度动态缩放，但该功能确实会在窗口缩放时以0.5的比例执行） 。

这是代码：

 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> 

Answer 1

您的size()函数从没有myfraction值

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 + ')';
}   

Answer 2

问题在于myfraction变量的范围。 您没有全局它。

 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> 

Answer 3

如果我理解您的问题:)我只是将两个功能合并为一个，您可以尝试一下

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