Инициализация функции внутри другой функции в JavaScript

Итак, у меня есть текстовое поле и вы хотите, чтобы размер шрифта был больше или меньше с помощью двух кнопок. Я сделал это, и он работает, но чтобы он работал, я должен был поместить содержимое o функции getTextSize внутри обоих вариантов увеличенияFontSize и reduceFontSize, и я уверен, что есть лучший способ сделать это.Инициализация функции внутри другой функции в JavaScript

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

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

Спасибо.

<body> 

<textarea id="editor"></textarea> 
<div class="fontSizeButtons"> 
    <button id="biggerFontBtn">Bigger Font</button> 
    <button id="smallerFontBtn">Smaller Font</button> 
</div> 

<script type="text/javascript"> 

var editor = document.getElementById('editor'); 
var biggerFont = document.getElementById('biggerFontBtn'); 
var smallerFont = document.getElementById('smallerFontBtn'); 

biggerFont.addEventListener('click', increaseFontSize, false); 
smallerFont.addEventListener('click', decreaseFontSize, false); 

function getTextSize() { 
    var style = window.getComputedStyle(editor, null).getPropertyValue('font-size'); 
    var textSize = parseFloat(style); 
} 

function increaseFontSize() { 
    getTextSize(); 
    editor.style.fontSize = (textSize + 3) + 'px'; 
} 

function decreaseFontSize() { 
    getTextSize(); 
    editor.style.fontSize = (textSize - 3) + 'px'; 
} 

</script>

источник

2014-09-19 nakkeru

вы можете захотеть, чтобы посмотреть через ответы и выбрать лучший для вас и вверх/downvote те, которые вы любите/не любите ...;) – webeno

Просто инициализировать переменные style и textSize в начале, за пределами функции, и он будет работать.

var editor = document.getElementById('editor'); 
 
var biggerFont = document.getElementById('biggerFontBtn'); 
 
var smallerFont = document.getElementById('smallerFontBtn'); 
 
var style; 
 
var textSize; 
 

 
biggerFont.addEventListener('click', increaseFontSize, false); 
 
smallerFont.addEventListener('click', decreaseFontSize, false); 
 

 
function getTextSize() { 
 
    style = window.getComputedStyle(editor, null).getPropertyValue('font-size'); 
 
    textSize = parseFloat(style); 
 
} 
 

 
function increaseFontSize() { 
 
    getTextSize(); 
 
    editor.style.fontSize = (textSize + 3) + 'px'; 
 
} 
 

 
function decreaseFontSize() { 
 
    getTextSize(); 
 
    editor.style.fontSize = (textSize - 3) + 'px'; 
 
}

<textarea id="editor"></textarea> 
 
<div class="fontSizeButtons"> 
 
    <button id="biggerFontBtn">Bigger Font</button> 
 
    <button id="smallerFontBtn">Smaller Font</button> 
 
</div>

Вот скрипка тоже: http://jsfiddle.net/gh03a7ue/

источник

2014-09-19 06:55:25 webeno

В том числе и ту же функцию дважды не лучшие практики. Однако вы можете это сделать;

var editor = document.getElementById('editor'), 
    biggerFont = document.getElementById('biggerFontBtn') 
    smallerFont = document.getElementById('smallerFontBtn'); 
biggerFont.addEventListener('click', increaseFontSize, false); 
smallerFont.addEventListener('click', decreaseFontSize, false); 
function getTextSize() { 
    var style = window.getComputedStyle(editor, null).getPropertyValue('font-size'); 
    return parseFloat(style); 
} 
function increaseFontSize() { 
    editor.style.fontSize = (getTextSize() + 3) + 'px'; 
} 
function decreaseFontSize() { 
    editor.style.fontSize = (getTextSize() - 3) + 'px'; 
}

источник

2014-09-19 06:58:04 SZenC

вы включаете функцию дважды тоже :) – webeno

Я использую его дважды, я не выполняю функцию дважды, один раз в каждой из функций FontSize – SZenC

Инициализация функции внутри другой функции в JavaScript

ответ

Смежные вопросы