Конкатенация переменных Javascript не работает

Question

Я знаю, что могут быть связанные сообщения, но для жизни меня я не могу понять, почему скрипт не реализует мои переменные, связанные с этим значением.

Вот скрипка: https://jsfiddle.net/9s4k9449/5/

Вкратце:

1. Красный ДИВ фиксируется на 743px в ширину, пока ширина окна не попадает в 734px, на котором указывают ширину изменения красного Div, чтобы 100%.

2. Функция, называемая getFraction(), измеряет ширину красного div и делит ее на красную divs с исходной шириной 743 для создания переменной с именем myfraction. В результате, когда окно больше 734px, ширина myfraction равна 1, в противном случае фракция отображается как вы получили ее, фракцию.

3. Синий div содержится в красном div и масштабируется с использованием webkitTransform с использованием значения myfraction. Результатом должно быть то, что когда окно больше ширины 734px, синий div не масштабируется, потому что myfraction = 1 (шкала = 1), но когда окно меньше 734px, синий div масштабируется до myfraction.

ПРИМЕЧАНИЯ: Проблема заключается в функции "шкалы()". Я считаю, что эта проблема связана с функцией, не улавливающей ценность myfraction; вероятно, ошибку конкатенации, которую я не могу найти. Я верю в это, потому что, когда переменная «myfraction» заменяется фактическим числом, скажем 0,5, весь процесс работает отлично (хотя синий 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

Если я undersand ваш вопрос :) Я только что присоединился две функции только один, вы может дать ему попробовать

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