在JavaScript中初始化另一个函数中的函数_Javascript_Function_Scope

在JavaScript中初始化另一个函数中的函数

javascript function

在JavaScript中初始化另一个函数中的函数,javascript,function,scope,Javascript,Function,Scope,因此，我基本上有一个文本区，并希望能够使字体大小更大或更小的两个按钮。我已经做过了，而且它可以工作，但是为了让它工作，我必须把函数getTextSize的内容放在increaseFontSize和decreseFontSize中，我相信有更好的方法来做下面的代码中出现的情况是，当我单击其中一个按钮时，de variable textSize未定义我知道这可能是一个超级新手的问题，原因是：我是编程方面的超级新手，但我确实关心性能和良好实践。我可以让它保持原样，但我知道一定有别的办法谢谢 &l

因此，我基本上有一个文本区，并希望能够使字体大小更大或更小的两个按钮。我已经做过了，而且它可以工作，但是为了让它工作，我必须把函数getTextSize的内容放在increaseFontSize和decreseFontSize中，我相信有更好的方法来做

下面的代码中出现的情况是，当我单击其中一个按钮时，de variable 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>


大字体
小字体
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）；
函数getTextSize（）{
var style=window.getComputedStyle（编辑器，null）.getPropertyValue（'font-size'）；
var textSize=parseFloat（样式）；
}
函数increaseFontSize（）{
getTextSize（）；
editor.style.fontSize=（textSize+3）+“px”；
}
函数decreaseFontSize（）{
getTextSize（）；
editor.style.fontSize=（textSize-3）+“px”；
}

只需在开始时在函数外部初始化变量

style

和

textSize

，它就会工作

var editor=document.getElementById（'editor'）；
var biggerFont=document.getElementById（'biggerFontBtn'）；
var smallerFont=document.getElementById（'smallerFontBtn'）；
var风格；
变量文本大小；
biggerFont.addEventListener（'click'，increaseFontSize，false）；
smallerFont.addEventListener（'click'，decreaseFontSize，false）；
函数getTextSize（）{
style=window.getComputedStyle（编辑器，null）.getPropertyValue（'font-size'）；
textSize=parseFloat（样式）；
}
函数increaseFontSize（）{
getTextSize（）；
editor.style.fontSize=（textSize+3）+“px”；
}
函数decreaseFontSize（）{
getTextSize（）；
editor.style.fontSize=（textSize-3）+“px”；
}


大字体
小字体

将同一个函数包含两次并不是最佳实践。但是你可以这样做

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

你也包括了两次函数：）我使用了两次，我没有做两次函数，在每个

FontSize

函数中都做了一次。你可能想看看答案，为你选择最好的答案，然后向上/向下投票你喜欢/不喜欢的…；）