무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
왜 참조함수를 쓰셧는지 궁금합니다
document.querySelector('#num-0') .addEventListener('click', onClickNumber('0')); 여기서 원래 이전강의에서는 .addEventListener('click',onClickNumber); 이런식으로 클릭다음에 함수자체를 호출햇는데 왜 이번에는 방식이 함수를 호출해서 인자를 전달하는 방식으로 하셧는지 궁금합니다
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
쿵쿵따
자바스크립트를 이 강의로 처음 공부하고 있어요.끝말잇기에 이어 쿵쿵따를 순서도 그려보며 코딩하는 중인데이틀 간 생각해보면서 구글에 검색해보면서 짠 코드가 <div><span id="order">1</span>번째 참가자</div> <div>제시어: <span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = parseInt(prompt('몇 명이 참가하나요?'), 10); const $order = document.querySelector('order'); const $word = document.querySelector('word'); let word; // 제시어 let newWord; //새 단어 if (!$word) { //제시어가 없을 때 word = newWord; $word.textContent = newWord; const order = Number($order.textContent); order ++; if (word.length == 3) { } else { } } else { //제시어가 있을 때 $word.textContent = newWord; order ++; }여기까지인데 처음이라 그런 건지 제가 머리가 안 좋은 건지 제가 어떤 걸 모르는지를 모르겠어서 진행이 안되는 상황이에요. 강의를 보는 게 맞을까요 아니면 계속 도전해봐야 될까요?
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
쿵쿵따 만들엇는데 갠찬은가요 ??
샘 직접 만들어 봣습니다 며칠 고민하면서 근데 공지에는 코드전체를 올리지말라햇는데 피드백을 받으려면 올릴수박에 없어서요 만든게 어떤지 평가나 피드백좀주실수잇나여 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div><span id="order">1</span>번쨰 쿵쿵따 참가자</div> <div>제시어:<span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇명인지 입력을 받는다:')); const $input = document.querySelector('input'); // 인풋울 자스로 기능을 넣어야 하기떄문이다 const $button = document.querySelector('button'); // 버튼 을 자스기능으로 넣어야 하기떄문 const $order = document.querySelector('#order'); // 몇번쨰인지 자스기능으로 값을 조절해야하기떄문 이다 const $word = document.querySelector('#word'); // 제시어의 저장및 잇는지 확인 하기 위해 자스기능으로 넣어야 하기떄문이다; let word; let newWord; // 인풋에 적혓을떄 세글자인지 판단한다 // 그와반대로 버튼에 눌럿을떄 이벤트가 발생되면 // 제시어값이 잇는채로 버튼이 눌리면 #word와 끝자리가 맞는지도 확인 작업을 해야하고 // const onClick = () => //버튼을 눌럿을떄 { if(newWord.length===3) // 버튼을 누르고 세글자 일떄 { if(!word) // 세글자이면서 제시어가 비어잇다 첫사람이다 { //제시어를 입력한 상태로 그값을 저장 해주어야 한다 word=newWord; $word.textContent = word; // word 변수에 담긴 내용이 $word라는 HTML 요소의 텍스트 내용으로 들어가게 될 거예요. // 그래서 워드 안에 입력된 뉴월드 단어값이 $word. 에 저장이 되서 제시어가 저장이 되는원리이다 $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else //세글자이면서 제시어가 잇는 즉 이미 한명이 시작한단계 { if(word[word.length-1]===newWord[0]) // 세글자이면서 제시어가 잇으며 마지막 단어와 시작단어가 같을떄 //둘다 값이 같을떄 제시어를 받는다 { word=newWord; /// 워드에 인풋 입력값을 저장해놈 단어를 저장 해둠 $word.textContent = word; // 이 해석을 연구해봐야 한다; $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else // 자리수 값이 다를떄 올바르지 않는단어임을 알려준다 { alert('입력을 다시하십시오 올바르지않는단어입니다'); } } } // 세글자 일떄 실행 else // 버튼을 눌럿을대 세글자가 아닐떄 들어가지지도 못하게 하면된다 { alert('세글자가 아니므로 다시 세글자를 입력해주세요'); } } const writing =(event) => // 인풋 글자입력란 이벤트 리스너와 연결된 함수 { newWord= event.target.value; // 인풋의 값이입력되면 저장 할껏 뉴월드에 ; } $input.addEventListener('input',writing); // 인푹에 이벤트 발생됫을떄 함수로 연결해서 단어를 저장한다; $button.addEventListener('click',onClick); // 버튼 이벤트 </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div><span id="order">1</span>번쨰 쿵쿵따 참가자</div> <div>제시어:<span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇명인지 입력을 받는다:')); const $input = document.querySelector('input'); // 인풋울 자스로 기능을 넣어야 하기떄문이다 const $button = document.querySelector('button'); // 버튼 을 자스기능으로 넣어야 하기떄문 const $order = document.querySelector('#order'); // 몇번쨰인지 자스기능으로 값을 조절해야하기떄문 이다 const $word = document.querySelector('#word'); // 제시어의 저장및 잇는지 확인 하기 위해 자스기능으로 넣어야 하기떄문이다; let word; let newWord; // 인풋에 적혓을떄 세글자인지 판단한다 // 그와반대로 버튼에 눌럿을떄 이벤트가 발생되면 // 제시어값이 잇는채로 버튼이 눌리면 #word와 끝자리가 맞는지도 확인 작업을 해야하고 // const onClick = () => //버튼을 눌럿을떄 { if(newWord.length===3) // 버튼을 누르고 세글자 일떄 { if(!word) // 세글자이면서 제시어가 비어잇다 첫사람이다 { //제시어를 입력한 상태로 그값을 저장 해주어야 한다 word=newWord; $word.textContent = word; // word 변수에 담긴 내용이 $word라는 HTML 요소의 텍스트 내용으로 들어가게 될 거예요. // 그래서 워드 안에 입력된 뉴월드 단어값이 $word. 에 저장이 되서 제시어가 저장이 되는원리이다 $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else //세글자이면서 제시어가 잇는 즉 이미 한명이 시작한단계 { if(word[word.length-1]===newWord[0]) // 세글자이면서 제시어가 잇으며 마지막 단어와 시작단어가 같을떄 //둘다 값이 같을떄 제시어를 받는다 { word=newWord; /// 워드에 인풋 입력값을 저장해놈 단어를 저장 해둠 $word.textContent = word; // 이 해석을 연구해봐야 한다; $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else // 자리수 값이 다를떄 올바르지 않는단어임을 알려준다 { alert('입력을 다시하십시오 올바르지않는단어입니다'); } } } // 세글자 일떄 실행 else // 버튼을 눌럿을대 세글자가 아닐떄 들어가지지도 못하게 하면된다 { alert('세글자가 아니므로 다시 세글자를 입력해주세요'); } } const writing =(event) => // 인풋 글자입력란 이벤트 리스너와 연결된 함수 { newWord= event.target.value; // 인풋의 값이입력되면 저장 할껏 뉴월드에 ; } $input.addEventListener('input',writing); // 인푹에 이벤트 발생됫을떄 함수로 연결해서 단어를 저장한다; $button.addEventListener('click',onClick); // 버튼 이벤트 </script> </body> </html>
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
fragment 질문
fragment는 메모리를 사용하니까 직접 화면에 그리는것보다 빠른 건가요?그렇다면 메모리 속도 > 화면 그리는 속도 라고 봐도 될까요??
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
제시어가 비어잇는가 ???
여기서 왜 if(!word) 를 해석하면 왜 이게 word 가 언디 파인드라고 하면 false 가되고 여기에 !주면 true 인건 알겟는데 워드가 트루인경우이지 이게왜 제시어가 비어잇는경우인가요 ????? 말자체가이해가 안되는데요 ??? 저는 이게 어떤원리로 돌아가는지 그림으로 안그려집니다 ㅜㅜ if(!word) // 제시어가 비어잇는가? { // 비어잇다 word = newWord; // 입력한단어가 제시어가 된다 // $word.textContent = word; $input.value=''; }
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
코드 작성..
function onLeftClick(e) { const target = e.target; const rowIndex = target.parentNode.rowIndex; const cellIndex = target.cellIndex; const clikedCellData = tableData[rowIndex][cellIndex]; console.log(clikedCellData); if (clikedCellData === CODE.FLAG || clikedCellData === CODE.QUESTION) { console.log('click') return; } if (clikedCellData === CODE.FLAG_MINE || clikedCellData === CODE.QUESTION_MINE || clikedCellData === CODE.MINE) { alert('펑!'); return; } if (clikedCellData === CODE.NORMAL) { const mineCount = countMine(rowIndex, cellIndex); target.textContent = mineCount || ''; target.className = 'opened'; tableData[rowIndex][cellIndex] = mineCount; } }순서도대로 작성해봤는데 강좌 코드랑 if문 순서가 다릅니다. 제대로 동작은 하는거같아요! 어떤게 더 좋은 방법인가요? 더 좋은 if문 작성 팁이 따로있을까요?
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
첫번쨰 사람이지 판단하기
샘 이거복붙으로 해봐도 안되네요 ㅜㅜ 왜 제시어를 입력을 해도 안되나요 ???? 제시어가 입력이되야하는데 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>끝말잇기</title> <style> </style> </head> <body> <div><span id="order">1</span>번쨰 참가자</div> <div>제시어:<span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇명이참가하나요 ?:')); const $button =document.querySelector('button'); const $input = document.querySelector('input'); const $word = document.querySelector('#word'); //선택하고 let word;//제시어저장 let newWord;// 새로입력한단어저장 const onClickButton=() =>{ if(!word) // 제시어가 비어잇는가? { // 비어잇다 word = newWord; // 입력한단어가 제시어가 된다 $word.textContent = word; } else{ // 비어잇지않다 } }; const onInput = (event) => { newWord = event.target.value; // 키보드를 입력할때마다 그글자가 저장이된다 }; $button.addEventListenter('click',onClickButton); $input.addEventListenter('input',onInput); /*첫번쨰 참가자인지 어떻게 판단을 할가 ??? 제시어가 없으면 첫번쨰 참가자 제시어라고 안니오겟지 그래서 워드를 만든거고 <div>제시어:<span id="order"></span></div> */ </script> </body> </html>
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
무작위 공 뽑기 관련해서 질문 있습니다.
const candidate = Array(45).fill().map((el, i) => i + 1); const suffle = []; while (candidate.length > 0) { const random = Math.floor(Math.random() * candidate.length); // 무작위 인덱스 뽑기 const spliceArray = candidate.splice(random, 1); const value = spliceArray[0]; suffle.push(value); } 위의 코드는 0부터 candidate 배열의 길이 -1 사이에서 무작위로 하나의 값을 가져오는 것으로 이해를 하였습니다. 이렇게 되면 뽑았던 값을 또 뽑을 가능성이 존재하는 것 아닌가요 ?또한 1에서 45 사이의 숫자를 무작위로 하나로 뽑아야 했을 때 random()함수 뒤에 candidate.length를 곱하는 것이 아니라 Math.random()*45 +1 이렇게 해야 하는 것이 아닌가 라고 생각이 듭니다. 왜 candidate.length가 오는지 궁금합니다.
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
c언어 구조체에 알아야할까요
백엔드 준비중에백엔드취업준비중에 c언어 배열포인터까지만 배우면 된다고 들엇습니다근데 구조체를 배워야 하나요 꼭알고 java를 넘어가야 하는지 c언어에서는 배열 포인터 까지만 알면 문제가없는지 궁금합니다귀한답변부탁드리겟습니다구조체가 꼭 필요한지 궁금합니다????
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
별숙제 문의드립니다.
안녕하세요 제로 초님, 별 숙제 관련하여 문의 드립니다.문제를 아래와 같이 풀어보았는데 정답이 맞는 지 의문이 들어서요. 시간 되실 때 확인 한 번 부탁드립니다. 감사합니다.//1for (let i=1; i<=9; i+=2){ console.log("*".repeat(i))}//2for(let i=9; i>=1; i-=2){ console.log("*".repeat(i))}//3for(let i = 5; i>=0; i--){ console.log(' '.repeat(5-i) + '*'.repeat(i))}//4for(let i = 1; i<=5; i++){ console.log(' '.repeat(5-i) + '*'.repeat(i))}//5for(let i=1 ; i<=9;i+=2){ console.log(" ".repeat((9-i)/2) + "*".repeat(i))}
- 해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
문법
이강의보면 문법은 더 공부할필요가 없나요 ???
- 해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
자바스크립트에서 css 적용이 안돼요
안녕하세요 Let's get IT 자바스크립트 책으로 공부하고 있습니다.7장 가위바위보 게임에서 <script> 안에서 css 적용이 전혀 안되어서 질문드립니다.6장 <self check 공색칠하기>여기에서도 자바스크립트로 css 적용이 안되어서 7장으로 넘어왔습니다... 구글에 검색했더니 캐시를 지워보라해서 지워봤는데도 적용이 계속 안됩니다.무슨 문제일까요... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> #computer { width: 142px; height: 200px; } </style> </head> <body> <div id="computer"></div> <div> <button id="scissors" class="btn">가위</button> <button id="rock" class="btn">바위</button> <button id="paper" class="btn">보</button> </div> <div id="score">0</div> <script> const $computer = document.querySelector('#computer'); const $score = document.querySelector('#score'); const $scissors = document.querySelector('#scissors'); const $rock = document.querySelector('#rock'); const $paper = document.querySelector('#paper'); const IMG = './rsp.png'; $computer.style.background = `url(${IMG}) 0 0 `; $computer.style.background.size = 'auto 200px'; </script> </body> </html>
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
이벤트 리스너 달기 질문드립니다.
강의 내용과 같이 적었는데 작동하지 않아서 질문드립니다.
- 해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
word 와 newWord와 자리를 바꾸면 왜 안되나요?
안녕하세요. 강의 잘 듣고 있습니다. 궁금한 사항이 있어서 질문드립니다.ㅠㅠ const onClick = () => { if (!word) { //제시어가 비어 있는가? //비어 있다. word = newWord; $word.innerHTML = newWord; console.log(newWord) } else { //비어 있지 않다. } }여기서 입력한 단어가 제시어가 된다.제가 혼자 해봤는데요ㅠㅠword = newWord ; 를newWord = word; 로자리를 바꾸면 동작하지 않습니다... 왜 그런건가요? 감사합니다! [제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
- 해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
비동기 코드 질문
호출스택에 먼저 (anonymous)가 있고 a를 호출하니 a함수가 그 위에 쌓이고그 다음 setTimeout은 비동기코드이니까 백그라운드에 있다가 콜백함수가 태스크큐를 거쳐 이벤트루프를 타고 호출스택으로 가기전에 호출스택이 비어져있어야 콜백함수가 호출스택으로 가는데 a안에 setTimeout이 있으니 동기코드가 아직 안끝났는데 콜백함수가 어떻게 호출스택으로 갈 수 있나요?동기코드는 그 안의 비동기코드가 아직 안끝났어도 자기 할일이 다 끝나면 호출스택에서 벗어나는건가요?
- 해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
카드 맞추기 질문
const total = 12; const colors = ['red', 'orange', 'yellow', 'green', 'white', 'pink']; let colorCopy = colors.concat(colors); let shuffled = []; let clicked = []; let completed = []; function shuffle() { // 피셔-예이츠 셔플 for(let i=0; colorCopy.length>0; i+=1) { const randomIndex = Math.floor(Math.random() * colorCopy.length); shuffled = shuffled.concat(colorCopy.splice(randomIndex, 1)); } }여기서 shuffled = shuffled.concat(colorCopy.splice(randomIndex, 1)); 이거를shuffled.push(colorCopy.splice(randomIndex, 1)) 로 해도 상관이 없나요? concat으로 한 이유가 있을까요
- 해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
책 내용중 forEach 부분 질문
const index = value.indexOf(String(number))에서굳이 String을 넣은 이유가 무엇인가요?
- 해결됨[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
고차함수 질문
const onClickOperator = (op) => { return () => { if (numOne) { operator = op; $operator.value = op; } else { alert(' 숫자를 먼저 입력하세요. ') } } }; document.querySelector('#plus').addEventListener('click', onClickOperator('+')); document.querySelector('#minus').addEventListener('click', onClickOperator('-')); document.querySelector('#divide').addEventListener('click', onClickOperator('/')); document.querySelector('#multiply').addEventListener('click', onClickOperator('*'));여기서 함수를 고차함수가 아닌 const onClickOperator = (op) => { if (numOne) { operator = op; $operator.value = op; } else { alert(' 숫자를 먼저 입력하세요. ') } };그냥 이렇게 하면 안되는 이유가 궁금합니다.
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
텍스트 rpg 강의 관련 질문입니다
const input = event.target['menu-input'].value; 를 사용하는 부분에서 강의를 듣기로는 menu-input이라는 id를 가진 input의 event.target.value를 따오는걸로 이해했는데이렇게 하지않고 그냥 const $menu-input = document.querySelector('#menu-input');const input = $menu-input.event.target.value; 로 해도 괜찮은건가요? 저 둘의 차이는 단지 두줄을 한줄로 간략하게 하는 용도인가요?
- 미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
안녕하세요. 끝말잇기 order가 안넘어가고 [object HTMLSpanElement]1번째 참가자 이렇게 나옵니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>끝말잇기</title> <style></style> </head> <body> <div><span id="order">1</span>번째 참가자</div> <div>제시어: <span id="word"></span></div> <input type="text" /> <button>입력</button> <script> const number = Number(prompt("몇 명이 참가하나요?")); const $button = document.querySelector("button"); const $input = document.querySelector("input"); const $word = document.querySelector("#word"); // word는 id니까 const $order = document.querySelector("#order"); let word; // 제시어 let newWord; // 새로 입력한 단어 const onClickButton = () => { if (!word) { // 제시어가 비어 있는가? // 비어 있다 word = newWord; // 입력한 단어가 제시어가 된다. 데이터를 바꾸고 // 화면도 바꿔줘야 함 $word.textContent = word; const order = Number($order.textContent); // order 숫자로 변환, 현재 순서 if (order + 1 > number) { // 현재 순서에서 1을 더한 값이 number보다 크다면 $order.textContent = 1; // 다음 순서를 1로 } else { // 그렇지 않다면 $order.textContent = order + 1; // 다음 순서를 현재 순서 + 1로 } $input.value = ""; // 입력칸 다시 공백으로 } else { // 비어 있지 않다 if (word[word.length - 1] == newWord[0]) { // 올바른가? -- 제시어의 마지막 글자와 새로 입력한 단어의 첫 번째 글자가 일치 word = newWord; $word.textContent = word; if (order + 1 > number) { $order.textContent = 1; } else { $order.textContent = order + 1; } $input.value = ""; } else { // 올바르지 않은가 alert("올바르지 않은 단어입니다!"); } } }; const onInput = (event) => { newWord = event.target.value; }; $button.addEventListener("click", onClickButton); $input.addEventListener("input", onInput); </script> </body> </html> 2번째 참가자 라고 떠야하는데 [object HTMLSpanElement]1번째 참가자가 대신 뜹니다ㅠㅠ