이 절차를 코드로 표현하면 다음과 같습니다.
① #order 태그를 선택해 $order 변수에 저장합니다.
② #order 태그 내부의 값을 꺼내 숫자로 변환하고 이를 order 변수에 저장합니다. ‘현재 순서를 파악한다’ 절차에 해당합니다.
③ order 변수의 값에 1을 더한 값이 number보다 크면 화면 순서를 1로 표시하고, 작으면 화면에 order + 1을 순서로 표시합니다.
④ 제시어가 비어 있지 않아도 차례를 넘기는 부분은 같으므로 ②~③ 코드를 추가합니다.
const $order = document.querySelector('#order'); ------ ①
let word; // 제시어
let newWord; // 현재 단어
const onInput = (event) => {
newWord = event.target.value; // 입력한 단어를 현재 단어로 저장
};
const onClickButton = () => {
if (!word) { // 제시어가 비어 있는가?
// 비어 있음
word = newWord; // 입력한 단어가 제시어가 됨
$word.textContent = word; // 화면에 제시어 표시
const order = Number($order.textContent); -------- ②