JavaScript의 다른 함수에서 함수 초기화하기

기본적으로 텍스트 영역이있어서 두 개의 버튼으로 글꼴 크기를 더 크게 또는 작게 만들 수 있기를 원합니다. 나는 그것을 해냈다.하지만 제대로 작동하도록 만들려면, contentsFactSize와 reduceFontSize 양쪽에 getTextSize 함수의 내용을 넣어야했고, 더 좋은 방법이 있다고 확신한다.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를 초기화하고 작동합니다. 두 번 같은 기능을 포함 http://jsfiddle.net/gh03a7ue/

출처

2014-09-19 06:55:25 webeno

관행의 최고되지 않습니다 : 여기에

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>

는 너무 바이올린입니다. 그러나 당신은 이것을 할 수 있습니다.

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의 다른 함수에서 함수 초기화하기

답변

관련 문제