calculator
16300 ワード
計算機の作成
let isFilled=false
クリックしたボタンが「数値」で、クリック前の入力値がない場合はfirstOpenRendにクリック値を指定し、isFiledにtrueを再割り当てします.
buttonContent=="0"の場合、ユーザーが0をクリックするとfirstOpenrendになります.textContent=="0"の状態はそのままで、0以外の数字を先に入力する必要があります.よって、0+1、0*2、...、等0で始まる演算はできません.
そのため、以下のように記入してください.
const calculator = document.querySelector('.calculator');
const buttons = document.querySelector('.calculator__buttons');
const firstOperend = document.querySelector('.calculator__operend--left');
const operator = document.querySelector('.calculator__operator');
const secondOperend = document.querySelector('.calculator__operend--right');
const calculatedResult = document.querySelector('.calculator__result');
//enter 버튼을 눌렀을때, 작동하는 함수
function calculate(n1,operator,n2){
let result = 0;
n1 = Number(n1);
n2 = Number(n2);
if(operator==='+') //여기서 operator는 매개변수 operator.
{
result = n1+n2;
}
else if(operator==='-')
{
result = n1-n2;
}
else if(operator==='*')
{
result = n1*n2;
}
else if(operator==='/')
{
result = n1/n2;
}
return String(result);
}
let isFilled=false;
buttons.addEventListener('click',function(event){
const target = event.target;
const action = target.classList[0];
const buttonContent = target.textContent; //textContent는 string을 리턴한다.
if(target.matched('button'))
{
if(action==='number' && isFilled===false)
{
firstOperend.textContent = buttonContent;
isFilled=true;
return; //return하지 않으면 다음 조건도 이어서 만족하므로 첫번째와 두 번째 숫자가 같게 출력되므로 꼭 return을 해줘야한다!
}
if(action==='number' && isFilled)
{
secondOperend.textContent = buttonContent;
}
if(action==='operator')
{
operator.textContent = buttonContent;
}
if(action==='decimal')
{
//console.log('소수점 버튼');
}
if(action==='clear')
{
firstOperend.textContent = '0';
secodnOperend.textContent = '0';
operator.textContent = '+';
calculatedResult.textContent = '0';
return isFilled = false;
}
if(action==='calculate')
{
calculate(firstOperend.textContent,operator.textContent,secondoperend.textContent);
calculateResult.teextContent = result;
}
}
});
textContentlet isFilled=false
クリックしたボタンが「数値」で、クリック前の入力値がない場合はfirstOpenRendにクリック値を指定し、isFiledにtrueを再割り当てします.
if(action==='number' && firstOperend.textContent==='0'){
firstOperend.textContent = buttonContent;
}
if(action==='number' && firstOperend.textContent!=='0'){
secondOperend.textContent = buttonContent;
}
isFiledを宣言しない場合は、上記のようにfirstOpenrendが使用されます.条件をtextContent===="0"で割った場合、どのような問題が発生しますか?buttonContent=="0"の場合、ユーザーが0をクリックするとfirstOpenrendになります.textContent=="0"の状態はそのままで、0以外の数字を先に入力する必要があります.よって、0+1、0*2、...、等0で始まる演算はできません.
そのため、以下のように記入してください.
let isFilled=false;
//이하 중략
if(action==='number' && isFilled===false)
{
firstOperend.textContent = buttonContent;
isFilled=true;
}
if(action==='number' && isFilled)
{
secondOperend.textContent = buttonContent;
}
//이하 중략
if(action==='clear')
{//0+0=0의 상태로 초기화시키고, isFilled도 false로 초기화!
firstOperend.textContent = '0';
secondOperend.textContent = '0';
operator.textContent = '+';
calculatedResult = '0';
isFilled=false;
}
この場合、firstOpenRend.textContent=="0"の条件がないため,0で始まる演算も可能となる.Reference
この問題について(calculator), 我々は、より多くの情報をここで見つけました https://velog.io/@kaitlin_k/코드스테이츠-621テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol