const participant = parseInt(prompt('몇 명이 참가하나요?'));
const yesOrNo = confirm(`${participant}명 맞나요?`);
const order = parseInt(orderNumber.textContent);
if (order + 1 > participant) {
orderNumber.textContent = 1;
} else {
orderNumber.textContent = order + 1;
}
}
event.preventDefault()
를 해준다.event.preventDefault();
if (!word || word[word.length - 1] === newWord[0]) {
word = newWord;
submitWord.textContent = word;
}
else {
alert('올바르지 않은 단어입니다!');
}
const coloringFont = document.querySelector('#coloring');
let colorList = ['teal', 'rgb(184, 130, 235)', 'cornflowerblue', 'tomato'];
let count = 0;
function randomColor() {
const randomNumber = Math.floor(Math.random() * colorList.length);
coloringFont.style.color = colorList[randomNumber];
}
randomColor();
setInterval(randomColor, 500);
<body>
<div class='container'>
<div class='participant-box' id='coloring'>
<span class='order-number'>1</span>번째 참가자
</div>
<div class="word-box">제시어: <span class='submit-word'></span></div>
<form class='input-box'>
<input type='text'>
<button type='button'>Click Me!</button>
</form>
</div>
<script src='index.js'></script>
<script
src="https://kit.fontawesome.com/6478f529f2.js"
crossorigin="anonymous"
></script>
</body>
</html>
const participant = parseInt(prompt('몇 명이 참가하나요?'));
const yesOrNo = confirm(`${participant}명 맞나요?`);
const orderNumber = document.querySelector('.order-number');
const submitWord = document.querySelector('.submit-word');
const form = document.querySelector('form');
const input = document.querySelector('input');
const button = document.querySelector('button');
let word;
let newWord;
function handleClickButton(event) {
event.preventDefault();
if (!word || word[word.length - 1] === newWord[0]) {
word = newWord;
submitWord.textContent = word;
const order = parseInt(orderNumber.textContent);
if (order + 1 > participant) {
orderNumber.textContent = 1;
} else {
orderNumber.textContent = order + 1;
}
} else {
alert('올바르지 않은 단어입니다!');
}
input.value = '';
input.focus();
}
function handleSubmitText(event) {
newWord = event.target.value;
}
form.addEventListener('submit', handleClickButton);
input.addEventListener('input', handleSubmitText);
const coloringFont = document.querySelector('#coloring');
let colorList = ['teal', 'rgb(184, 130, 235)', 'cornflowerblue', 'tomato'];
let count = 0;
function randomColor() {
const randomNumber = Math.floor(Math.random() * colorList.length);
coloringFont.style.color = colorList[randomNumber];
}
randomColor();
setInterval(randomColor, 500);
참조 및 문제 출처: ZerochoTV ES2021 자바스크립트 강좌