-
글쓴이글
-
2022년 5월 8일 23:14 #33488
Heok Joon참가자<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style></style><link rel="stylesheet" href="main.css" />
<title>Hello, world!</title>
<style>
.black-bg {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
z-index: 5;
padding: 30px;
visibility: hidden;
opacity: 0;
transition: all 1s;
top: -1000px;
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
.show-modal {
visibility: visible;
opacity: 1;
top: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul><button id="modalOpen">로그인</button>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"
>Email address</label
>
<input
type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
<div id="emailHelp" class="form-text">
We'll never share your email with anyone else.
</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label"
>Password</label
>
<input
type="password"
class="form-control"
id="exampleInputPassword1"
/>
</div>
<div class="mb-3 form-check">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
/>
<label class="form-check-label" for="exampleCheck1"
>Check me out</label
>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<button class="btn btn-danger" id="close" onclick="none()">닫기</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>
$("#modalOpen").on("click", function () {
$(".black-bg").addClass("show-modal");
});var email = document.querySelectorAll(".form-control");
document.querySelector("form").addEventListener("submit", function () {
if (document.getElementById("exampleInputEmail1") == "") {
alert("공백이 있습니다 ");
}
});
</script>
</body>
</html>document.querySelector("form").addEventListener("submit", function () {
if (document.getElementById("exampleInputEmail1") == "") {
alert("공백이 있습니다 ");
}여기서 왜 공백이 있게 submit 를 했는데
왜 alert를 실행하지 않는지 모르겠습니다
2022년 5월 9일 09:29 #33505
codingapple키 마스터인풋에 입력한 값은 document.getElementById("exampleInputEmail1").value 라고 해야합니다
-
글쓴이글
- 답변은 로그인 후 가능합니다.