VanillaJS 0420
12836 ワード
App.js
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function onLoginBtnClick(){
const username = loginInput.value;
if(username === ""){
alert("please write your name")
} else if (username.length > 15){
alert("your name is too long.")
}
}
loginButton.addEventListener("click",onLoginBtnClick)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<div id="login-form">
<input type="text" placeholder="What is your name?"/>
<button>Log In</button>
</div>
<script src="app.js"></script>
</body>
</html>したがって、上のコードは下のコードと同じです.
app.js
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function onLoginBtnClick(){
const username = loginInput.value;
console.log(username)
}
loginButton.addEventListener("click",onLoginBtnClick)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<div id="login-form">
<input required
maxlength="15"
type="text"
placeholder="What is your name?"/>
<button>Log In</button>
</div>
<script src="app.js"></script>
</body>
</html>jsに多すぎる機能を追加するよりもhtml自体の機能を使ってコードを簡略化したほうがいい!
Reference
この問題について(VanillaJS 0420), 我々は、より多くの情報をここで見つけました https://velog.io/@hyj3363/VanillaJS-0420テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol