Question

所以我基本上有一个textarea，并希望能够通过两个按钮使字体大小更大或更小。我已经完成它并且它可以工作，但为了使它工作，我必须将函数getTextSize的内容放在increaseFontSize和decreaseFontSize中，并且我确定有更好的方法来做它

下面的代码会发生什么变化，当我点击其中一个按钮时，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>

Answer 1

只需在函数外部的开头初始化变量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/

Answer 2

两次包含相同的功能并不是最好的做法。但是你可以这样做;

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

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

2 个答案: