使用JavaScript初始化另一个函数中的函数

所以我基本上有一个textarea，希望能够使用两个按钮使字体变大或变小。我已经完成了它，它的工作原理，但为了使它工作，我不得不把getTextSize的内容放在increaseFontSize和decreaseFontSize中，我相信有一个更好的方法。使用JavaScript初始化另一个函数中的函数

下面的代码会发生什么情况是，当我单击任一按钮时de变量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 2014-09-19 08:20:35

只是初始化变量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 2014-09-19 07:00:11

我使用了两次，我没有在两个FontSize函数中重复执行两次函数 – SZenC 2014-09-19 09:51:35

使用JavaScript初始化另一个函数中的函数

回答

相关问题