구구단 화면 만들기

Make a multiplication table screen

이벤트리스너가 반복문 역할을 하고있지만 항상 반복문 역할을 하는 것은 아니다.

input type="text" 는 텍스트 형식이기 때문에 숫자로 바꿔줘야한다.

var num1 = Math.ceil(Math.random() * 9);
var num2 = Math.ceil(Math.random() * 9);
var result = num1 * num2;

var body = document.body;
var word = document.createElement('div');
word.textContent = String(num1) + '곱하기' + String(num2) + '는?';
document.body.append(word);

var fform = document.createElement('form');
document.body.append(fform);

var 입력창 = document.createElement('input');
입력창.type = 'number';//이렇게 해줘도 입력창.value는 숫자로 되지 않는다.
fform.append(입력창);//document>body가 아니라 form 하위에 만들어줘야하기 때문에.

var btn = document.createElement('button');
btn.textContent = '입력';//태그 안에 들어가는 글자.
fform.append(btn);

var result = document.createElement('div');
document.body.append();

//form 안에서 input은 엔터키를 사용할 수 있다. 이 때 새로고침되는 현상만 해결해주면 된다.
form.addEventListener('submit',function(e){//function이 콜백함수로 쓰였다.
    e.preventDefault();//엔터를 치면 다음 페이지로 넘어가는 form의 기본 동작을 막는다.
    if(result === Number(입력창.value)) {//숫자로 형변환해주어야한다. 그렇지 않으면 input type을 'number'로 해주면 된다.(14번째 줄 추가)
        console.log(result,입력창.vlaue);//error 원인을 알 수 있다. 입력창.value 값이 문자로 나오기 때문에 숫자값이 같아도 다르게 나온다.
        result.textContent = '딩동댕';//정답이라면 다음 랜덤문제를 생성해야한다.
        num1 = Math.ceil(Math.random() * 9);//기존 변수를 수정하는 의미에서 var을 붙이지 않는다.
        num2 = Math.ceil(Math.random() * 9);
        result = num1 * num2;
        word.textContent = String(num1) + '곱하기' + String(num2) + '는?';
        입력창.value = ' ';
        입력창.focus();
    } else {
        result.textContent = '땡';
        입력창.value = ' ';
        입력창.focus();
    }
});