* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
개인 프로젝트 작성중에 질문드립니다.
시약 입고 입력및 리스트를 만들고 있는데 입고일 지정하고 바코드 입력해서 리스트에 뜨는 기능은 정상적으로 작동합니다.
입고일을 입력하고 바코드를 찍고 엔터를 치면 새로고침이 되면서 리스트가 뜨고 입고일은 입력한 날짜가 그대로 찍히는데
제가 하고싶은 기능은 처음 페이지를 열었을때 입고일에 오늘날짜가 기본값으로 찍히게 하는 기능입니다.
인터넷을 찾아서 해당구문을 넣어봤지만 콘솔에는 에러를 띄우고 기능이 작동을 안하네요
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet" />
<title>시약 입출고 관리</title>
<style>
* {
font-family: "Gowun Batang", serif;
color: white;
}
body {
background-image: linear-gradient(0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("https://cdn.aitimes.com/news/photo/202010/132592_129694_3139.jpg");
background-position: center;
background-size: cover;
}
h1 {
font-weight: bold;
}
.order {
width: 500px;
margin: 60px auto 0px auto;
padding-bottom: 60px;
}
.mybtn {
width: 100%;
}
.order>table {
margin: 40px 0;
font-size: 18px;
}
option {
color: black;
}
</style>
<script>
$(document).ready(function () {
show_order();
});
function show_order() {
$("#order-box").empty();
fetch('/show').then((res) => res.json()).then((data) => {
let rows = data['result']
rows.forEach((a) => {
let id = a["id"];
let date = a["date"].substr(2);
let name = a["name"];
let lot = a["lot"];
let exp = a["exp"].substr(2);
let temp_html = ` <tr>
<td>${date}</td>
<td>${name}</td>
<td>${lot}</td>
<td>${exp}</td>
<td><button onclick="del_order('${id}')" class="btn btn-warning mybtn">삭제</button></td>
</tr>`;
$("#order-box").append(temp_html);
});
});
}
function save_order() {
let date = $("#date").val();
let barcode = $("#barcode").val();
sessionStorage.setItem('date', date)
let formData = new FormData();
formData.append("date_give", date);
formData.append("barcode_give", barcode);
fetch('/barcode', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
console.log(data);
// alert(data["msg"]);
window.location.reload();
});
}
document.addEventListener('DOMContentLoaded', function () {
$('#date').val(sessionStorage.getItem('date'))
sessionStorage.clear()
})
function del_order(del) {
let formData = new FormData();
formData.append("del_give", del);
fetch('/del', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
alert(data["msg"]);
window.location.reload();
});
}
function enterkey() {
if (window.event.keyCode == 13) {
// 엔터키가 눌렸을 때 실행할 내용
save_order();
}
}
//오늘날짜를 입고일에 기본으로 찍히게 하는 코드
let today = new Date().toISOString().substr(0, 10);
console.log(today)
// id가 "date"인 input 요소를 찾아 초기값을 설정합니다.
document.getElementById('date').value = new Date().toISOString().substring(0, 10)
//입고일 입력시 새로고침하면 그전입력값 기억
dateInput.addEventListener("change", function () {
localStorage.setItem("date", this.value);
});
</script>
</head>
<body>
<div class="mask"></div>
<div class="order">
<h1>시약 입출고 관리</h1>
<div class="order-info">
<div class="input-group mb-3">
<span class="input-group-text">입고일</span>
<input id="date" type="date" class="form-control" />
</div>
<div class="input-group mb-3">
<span class="input-group-text">바코드</span>
<input id="barcode" type="text" class="form-control" onkeyup="enterkey();" autofocus />
</div>
<button onclick="save_order()" type="button" class="btn btn-warning mybtn">입력</button>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">입고일</th>
<th scope="col">시약명</th>
<th scope="col">lot.No</th>
<th scope="col">Exp.date</th>
<th scope="col">삭제</th>
</tr>
</thead>
<tbody id="order-box">
<tr>
<td>230303</td>
<td>reagent</td>
<td>123456</td>
<td>230323</td>
<td><button onclick="del_order()" class="btn btn-warning mybtn">삭제</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
