<script>
// 위의 HTML 은 수정하지 마세요
// 위의 HTML 안에 inline JS 코드 없이 동작할수 있도록 아래에 작성해보세요
document.getElementById('btn').addEventListener('click', function () {
let e;
for (x of document.getElementsByName('option')) {
if (x.checked) {
e = x.value;
break;
}
}
switch (e) {
case '구매자명+금액': {
const frm = document.forms['frm1'];
if (!frm['name'].value.trim().length) {
alert('구매자명을 입력하세요');
} else if (Number(frm['price'].value.trim()) <= 0) {
alert('올바른 금액을 입력하세요(0보다 커야함)');
} else {
frm.submit();
}
break;
}
case '이메일': {
const frm = document.forms['frm2'];
let regex = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
console.log(frm['email'].value.trim());
if (!regex.test(frm['email'].value.trim())) {
alert('이메일 형식에 맞춰 제대로 입력하세요.');
} else {
frm.submit();
}
break;
}
case '카드번호': {
const frm = document.forms['frm3'];
let regex = new RegExp('^[0-9]{4}$');
const numlist = document.getElementsByName('cardNum');
let check = true;
for(x of numlist) {
if(!regex.test(x.value)) {
alert('카드번호 제대로 입력하세요');
check = false;
break;
}
}
check && frm.submit();
break;
}
}
});
function hidenClass(e) {
switch (e.value) {
case '구매자명+금액': {
document.forms['frm1'].classList.remove('hidden');
document.forms['frm2'].classList.add('hidden');
document.forms['frm3'].classList.add('hidden');
break;
}
case '이메일': {
document.forms['frm1'].classList.add('hidden');
document.forms['frm2'].classList.remove('hidden');
document.forms['frm3'].classList.add('hidden');
break;
}
case '카드번호': {
document.forms['frm1'].classList.add('hidden');
document.forms['frm2'].classList.add('hidden');
document.forms['frm3'].classList.remove('hidden');
break;
}
}
}
for (e of document.getElementsByName('option')) {
e.addEventListener("focus", function () {
hidenClass(this);
});
}
</script>
유상곤님 코드
<script>
var api_key = "36e7dd6b4b31c8b29a940ccd09b0f09e";
function loadData() {
const frm = document.forms['frm'];
const regDate = frm['regDate'].value.trim().split('-').join('');
let multiMovieYn = frm['multiMovieYn'].value.trim();
if (multiMovieYn.length) {
url += `&multiMovieYn=${multiMovieYn}`;
}
let repNationCd = frm['repNationCd'].value.trim();
if (repNationCd.length) {
url += `&repNationCd=${repNationCd}`;
}
let itemPerPage = frm['itemPerPage'].value.trim();
if (!regDate.length) {
alert('날짜 포맷이 맞지 않습니다.');
} else if (!Number(itemPerPage) || (!Number.isInteger(Number(itemPerPage)) || (Number(itemPerPage) < 1 || Number(itemPerPage) > 10)))
alert("출력 ROW는 1 ~ 10 사이의 정수이어야 합니다.");
else {
url += `&targetDt=${regDate}&itemPerPage=${itemPerPage}`;
// console.log(url);
fetch(url)
.then(response => response.json())
.then(obj => parseJSON(obj))
;
}
}
function parseJSON(data) {
const table = [];
table.push(`
<tr>
<th>순위</th>
<th>영화명</th>
<th>누적관객수</th>
<th>전일대비순위증감</th>
</tr>
`);
const list = data.boxOfficeResult.dailyBoxOfficeList;
for(x of list) {
table.push(`
<tr>
<td>${x.rank}</td>
<td>${x.movieNm}</td>
<td>${x.salesAmt}</td>
<td>${x.rankInten}</td>
</tr>
`);
}
document.getElementById('resultTable').innerHTML = table.join('\n');
}
function removeTable() {
document.getElementById("resultTable").innerHTML = '';
}
</script>
유상곤님 코드
<script>
// 위의 HTML 은 수정하지 마세요
// 위의 HTML 안에 inline JS 코드 없이 동작할수 있도록 아래에 작성해보세요
let radios = document.querySelectorAll('#receiptOption input');
let frms = document.querySelectorAll('#receipt form');
let formNum = 0;
for(e of document.querySelectorAll('#receiptOption input')){
e.addEventListener('change', function(){
for(let i=0; i<3; i++){
radios[i].checked ? frms[i].classList.remove('hidden') || (formNum = i) : frms[i].classList.add('hidden');
}
})
}
function check() {
let bool = true;
if(formNum==0){
frms[0]['name'].value.trim() === "" && (alert("구매자명을 입력하세요"),bool=false);
frms[0]['price'].value.trim() === "" && (alert("결제금액을 입력하세요"),bool=false);
}
if(formNum==1){
//계정@도메인. 한글안됨
/^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(frms[1]['email'].value.trim()) || (alert("이메일을 입력하세요"),bool=false);
}
if(formNum==2){
for(e of frms[2]['cardNum']){
/^\d{4}$/.test(e.value.trim()) || (bool=false);
}
bool || alert("카드번호를 입력하세요");
}
bool && frms[formNum].submit();
}
let btn = document.getElementById('btn');
btn.addEventListener('click', check);
</script>
종현님 코드
<script>
var submitBtn = document.getElementById("btn");
// 위의 HTML 은 수정하지 마세요
// 위의 HTML 안에 inline JS 코드 없이 동작할수 있도록 아래에 작성해보세요
for(e of document.querySelectorAll("#receiptOption input")){
e.addEventListener("click",function(){
if(this.value == "구매자명+금액") {
document.forms['frm1'].classList.remove('hidden');
document.getElementsByName("name").item(0).value = "";
document.getElementsByName("price").item(0).value = "";
document.forms['frm2'].classList.add('hidden');
document.forms['frm3'].classList.add('hidden');
}
if(this.value == "이메일") {
document.forms['frm1'].classList.add('hidden');
document.forms['frm2'].classList.remove('hidden');
document.getElementsByName("email").item(0).value = "";
document.forms['frm3'].classList.add('hidden');
}
if(this.value == "카드번호") {
document.forms['frm1'].classList.add('hidden');
document.forms['frm2'].classList.add('hidden');
document.forms['frm3'].classList.remove('hidden');
for(e of document.getElementsByName("cardNum")){
e.value = "";
}
}
});
}
submitBtn.addEventListener("click",function(){
if(document.getElementsByName("option").item(0).checked){
if(document.getElementsByName("name").item(0).value.trim().length == 0) {
alert("구매자명을 입력하세요"); return}
if(document.getElementsByName("price").item(0).value.trim().length == 0){
alert("결제 금액을 입력하세요"); return}
document.forms['frm1'].submit()
}
if(document.getElementsByName("option").item(1).checked){
// 이메일 정규표현식
let regexp_email = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
if(!regexp_email.test(document.getElementsByName("email").item(0).value.trim())){
alert("이메일을 입력하세요"); return}
document.forms['frm2'].submit()
}
if(document.getElementsByName("option").item(2).checked){
// 카드번호 정규표현식
let regexp_number = /\d{4}/;
for(e of document.getElementsByName("cardNum")){
if(!regexp_number.test(e.value)) {
alert("카드번호를 입력하세요"); return}
}
document.forms['frm3'].submit()
}
});
</script>
이상진
<script>
var api_key = "f5eef3421c602c6cb7ea224104795888";
function removeTable() {
document.getElementById('resultTable').removeChild(document.getElementById('resultTable').childNodes[0]);
}
function cheack(targetDt, itemPerPage) {
// 날짜 유효성 검사
const regexp_date = /\d{4}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])$/
if (!regexp_date.test(targetDt)) {
alert("날짜 포맷이 맞지 않습니다.")
return false;
}
// 페이지 ROW 유효성 검사
if (!(itemPerPage > 0 && itemPerPage < 11)) {
alert("출력ROW는 1 ~ 10 사이의 정수이어야합니다.")
return false;
}
return true;
}
function loadData() {
let url;
const frm = document.forms['frm']
let targetDt = frm["targetDt"].value.replaceAll("-", "");
let multiMovieYn = frm["multiMovieYn"].value;
let repNationCd = frm["repNationCd"].value;
let itemPerPage = frm["itemPerPage"].value;
// 유효성 검사
if (!cheack(targetDt, itemPerPage)) return;
url = `${req_url}?key=${api_key}&targetDt=${targetDt}`
fetch(url)
.then(Response => Response.json())
.then(jsonObj => parseJSON(jsonObj));
}
function parseJSON(jsonObj) {
const table = [];
table.push("<tr><th>순위</th><th>영화명</th><th>누적관객수</th><th>전일대비순위증감</th></tr>");
jsonObj.boxOfficeResult.dailyBoxOfficeList.forEach(list => {
table.push(`
<tr>
<td>${list.rank}</td>
<td>${list.movieNm}</td>
<td>${list.audiAcc}</td>
<td>${list.rankInten}</td>
</tr>
`)
});
document.getElementById("resultTable").innerHTML = table.join('\n');
}
</script>
<script>
// 위의 HTML 은 수정하지 마세요
// 위의 HTML 안에 inline JS 코드 없이 동작할수 있도록 아래에 작성해보세요
let radios = document.querySelectorAll('#receiptOption input');
let frms = document.querySelectorAll('#receipt form');
let formNum = 0;
for(e of document.querySelectorAll('#receiptOption input')){
e.addEventListener('change', function(){
for(let i=0; i<3; i++){
radios[i].checked ? frms[i].classList.remove('hidden') || (formNum = i) : frms[i].classList.add('hidden');
}
})
}
function check() {
let bool = true;
if(formNum==0){
frms[0]['name'].value.trim() === "" && (alert("구매자명을 입력하세요"),bool=false);
frms[0]['price'].value.trim() === "" && (alert("결제금액을 입력하세요"),bool=false);
}
if(formNum==1){
//계정@도메인. 한글안됨
/^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(frms[1]['email'].value.trim()) || (alert("이메일을 입력하세요"),bool=false);
}
if(formNum==2){
for(e of frms[2]['cardNum']){
/^\d{4}$/.test(e.value.trim()) || (bool=false);
}
bool || alert("카드번호를 입력하세요");
}
bool && frms[formNum].submit();
}
let btn = document.getElementById('btn');
btn.addEventListener('click', check);
</script>
이종현님
댓글 영역