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