preventDefault 사용
기존에 저장되어있던 자바스크립트의 이벤트들이 동작하지않게끔
막아준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Vanilla Challenge</title>
<meta charset="UTF-8" />
</head>
<body>
<form id="login-form">
<input required maxlength="40" type="text" id="createId" value="" />
<button>dddd</button>
<a href="https://www.naver.com">네이버</a>
</form>
<script src="todo.js"></script>
</body>
</html>
a 태그 부분을 보고 자바스크립트소스를 보면
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
const link = document.querySelector("a");
function onLoginSubmit(tomato) {
tomato.preventDefault();
const username = loginInput.value;
console.log(username);
}
function handleLinkClick(event) {
event.preventDefault();
console.dir(event);
}
loginButton.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick);
a 태그를 가져온 변수link가 클릭을했을때에 www.naver.com으로 넘어가지 않는 현상이 일어난다
이렇데 기존에 저장되어있던 이벤트의 동작을 막아주는 역활을하는것이
preventDefault() 이다.
localStorage : 브라우저용 DB
문제 JS Casino
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Vanilla Challenge</title>
<meta charset="UTF-8" />
</head>
<body>
<h2>Random Number Game</h2>
<form id="generate-form">
Generate a number betwwen 0 and <input type="number" class="firstInput"/><br/>
Guess the number: <input type="number" class="secondInput"/>
<button>Play!</button>
<div id="textPara"></div>
</form>
<script src="todo.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const rangeNumber = document.querySelector("#generate-form .firstInput");
const inputGuessNumber = document.querySelector("#generate-form .secondInput");
const playButton = document.querySelector("#generate-form");
const textPara = document.querySelector("#textPara");
function radomPlay(event){
event.preventDefault();
const randomGab = Math.floor(Math.random() * rangeNumber.value);
let resultPara = "you lose!";
if( inputGuessNumber.value > randomGab)
{
resultPara = `You Win!`;
alert(resultPara);
}else
{
const resultPara = `You lose!`;
alert(resultPara);
}
textPara.innerHTML = `You chose: ${inputGuessNumber.value} , the machine chose: ${randomGab} <br/> 왜안될까 ㅠㅠㅠ ${resultPara}`;
}
playButton.addEventListener("submit", radomPlay);
수정해볼코딩
- 삼항연산자로 바꿔줘본다
- 같을때 you win!이라는 조건을 수정해준다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const maxNumber = document.getElementById("maxNumber");
const result = document.getElementById("js-result");
const jsGuessNumber = document.getElementById("js-guess");
const playButton = jsGuessNumber.querySelector("button");
function radomPlay(e){
e.preventDefault();
const max = maxNumber.value;
const maxNumRange = Math.ceil(Math.random() * max);
const guessNumber = jsGuessNumber.querySelector("input");
const numGuessNumber = parseInt(guessNumber.value, 10); //form input 태그의 문자를 -> 숫자화
const resultSpan = document.querySelector("h4");
result.innerHTML = `You chose: ${numGuessNumber}, the machine chose: ${maxNumRange}. <br/>
<strong></strong>
`;
if(maxNumRange === numGuessNumber)
{
resultSpan.innerText = "You Won!";
}
else
{
resultSpan.innerText = "You lose!";
}
}
playButton.addEventListener("click", radomPlay);
이렇게 수정해보았다.