parseFloat возвращает NaN (при разборе размера документа)

Question

body parseFloat продолжает возвращать NaN, когда он должен быть -0,1 или 0,1, когда я печатаю его в console.log, я, скорее всего, просто устаю, но я не вижу проблемы. Любая помощь очень ценится как всегда, Кроме того, не смотря на JQuery ответить здесь, это должно быть JS

function startUp() { 
    var fontButtons = document.getElementsByClassName("fontsizer"); 
    for (var i=0; i < fontButtons.length; i++) { 
    document.getElementsByClassName("fontsizer")[i].addEventListener("click", resizeText); 
    } 
}; 

window.onload = startUp; 

function resizeText() { 
    var fontChange = parseFloat(this.value); 
    console.log(fontChange); 
    if (document.body.style = "") { 
     document.body.setAttribute("style", "font-size:1.0em;"); 
    } 
    var currentFontSize = parseFloat(document.body.style.fontSize.replace('em', '')); 
    console.log(currentFontSize); 
    document.body.style.fontSize = (currentFontSize + fontChange) + "em"; 
}; 

и HTML

<div id="fontbuttons"> 
<input class="fontsizer" value="-0.1" type="image" id="fontdown" alt="-" src="fontdown.png" /> 
<input class="fontsizer" value="0.1" type="image" id="fontup" alt="+" src="fontup.png" /> 
</div> 

Answer 1

= - это назначение, поэтому эта линия на самом деле означает чистый стиль кузова.

if (document.body.style = "") { 

И затем он возвращает присвоенное значение (пустая строка) в if заявления, в то время как "" является falsy значения, поэтому проверка на самом деле if(false) {.... У вас никогда не будет установлен размер шрифта.

Вы должны использовать == или === сравнить

if (document.body.style == "") { 

document.body.style является объектом, он никогда не должен быть равен пустой строке. Вы должны сравнить с ним document.body.style.fontSize.

document.body.style.fontSize = "1.0em"document.body.setAttribute. Потому что setAttribute изменяет только атрибут HTML, а то, что вы хотите, - это свойство DOM.

EDIT: Я пропустил вещь, как отметил Roko C. Buljan. Когда вы устанавливаете размер шрифта в CSS, document.body.style.fontSize все равно будет emtpy-строкой, если только вы не манипулируете им с JS. Вам лучше сравнить с вычисленным стилем, решение рассматривается в его ответе.

function startUp() { 
 
    var fontButtons = document.getElementsByClassName("fontsizer"); 
 
    for (var i = 0; i < fontButtons.length; i++) { 
 
     fontButtons[i].addEventListener("click", resizeText); 
 
    } 
 
}; 
 

 
window.onload = startUp; 
 

 
function resizeText() { 
 
    var fontChange = parseFloat(this.value); 
 
    console.log(fontChange); 
 

 
    if (document.body.style.fontSize == "") { 
 
     document.body.style.fontSize = "1.0em"; 
 
    } 
 

 
    var currentFontSize = parseFloat(document.body.style.fontSize.replace('em', '')); 
 
    console.log(currentFontSize); 
 
    document.body.style.fontSize = (currentFontSize + fontChange) + "em"; 
 
};

<div id="fontbuttons"> 
 
<input class="fontsizer" value="-0.1" type="button"> 
 
<input class="fontsizer" value="0.1" type="button"> 
 
</div> 
 
<p>text</p>

Answer 2

Хорошо, скажем, у нас есть набор размера шрифта в 1.2em

/*CSS:*/ body{ font-size: 1.2em; } 

в JS если вы испытываете:

console.log(document.body.style.fontSize); // *(and empty string)* 

Так что вам нужно сделать, как:

var style = window.getComputedStyle(document.body, null);  
console.log(style.fontSize); // "19.2px" 

облом, но мы ожидали em, верно?

Для каждого браузера устанавливает размер шрифта по умолчанию для 16px (google it) вы можете получить любоеem значения путем простого деления px value, возвращаемые наш getComputedStyle по 16.

var style = window.getComputedStyle(document.body, null); // .fontSize = "19.2px" 
var currentFontSize_EM = parseFloat(style.fontSize)/16 // 1.2 

document.body.style.fontSize = (currentFontSize_EM + fontChange) + "em"; 

, что»ы Это.