js file 분리 시 js 일부만 작동 외.

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

글쓴이

글

2023년 7월 27일 13:21 #92505

참가자

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
 <link rel="stylesheet" href='../css/main.css'>

    </head>
<body>  
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<div class="black">
  <div class="white">
    <h4>로그인하세요</h4>
        <form action="suc.html">
  <div class="my-3">
    <input type="text" class="form-control" id="na">
   </div>
   <div class="my-3">
     <input type="password" class="form-control" id='do'>
   </div>
   <button type="submit" class="btn btn-primary st">전송</button>
   <button type="button" class="btn btn-danger" id="close">닫기</button>
</form></div></div> 
 <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>
 <div class="nu"></div> </nav>  
   <ul class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start jh hu">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>Content for list item</div>
    <span class="badge bg-primary rounded-pill">14</span>
  
  <li class="list-group-item d-flex justify-content-between align-items-start hu jh_1">
    <div class="ms-2 me-auto">
 <div class="fw-bold">Subheading first</div>Content for list item </div>
    <span class="badge bg-primary rounded-pill">14</span>
  
  <li class="list-group-item d-flex justify-content-between align-items-start hu jh_2">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>Content for list item</div>
    <span class="badge bg-primary rounded-pill">14</span>
  

<div class="po"></div>
 <div class="ma"><h4>Shirts on Sale</h4>
 <button class="btn btn-danger" id='girl6'>Log-in</button></div>
 <div class="alert alert-danger" role="alert"><span id='ss'>5</span>초 이내 구매 시 사은품 증정!!</div>
<span class="badge bg-dark blur ms-auto mx-3 ">Dark 🔄</span>
 <p>태조 이성계가 태어난 년도는?</p>
<input type="text" id="ans">
<button id="swer">제출</button>
    <div class="lorem" style="width: 230px; height: 110px;overflow-y: scroll;margin-left: auto"> <div class="nu_1"></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab sunt fuga, possimus iste a accusantium, dicta magni magnam et facilis sequi laboriosam tenetur temporibus? Doloremque beatae nam officiis libero, nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab sunt fuga, possimus iste a accusantium, dicta magni magnam et facilis sequi laboriosam tenetur temporibus? Doloremque beatae nam officiis libero, nemo.</div>
    <h1 id="hello">강준상</h1>   <h1 class="hello">강준상</h1>
    <h1 id="op">JS 초보에요</h1> 
<div class="aer" id='rt2'><span>알림창임</span></div>
<button id='girl3'>열기</button>
<button class='girl'>ID 입력</button>
<button class='girl1'>PW 입력</button>
<button id='girl2'>닫기</button> <button id='girl5'>Hide</button>
<button id='girl4'>Show</button> 
<div style="overflow: hidden">
<div class="sl">
    <div class="sb">< img src='../img/car1.png'></div>
  <div class="sb">< img src='../img/car2.png'></div>
  <div class="sb">< img src='../img/car3.png'></div>
</div></div>
<button class="de-1">1</button> <button class="de-2">2</button>
<button class="de-3">3</button> <button class="next">Next</button>
 <button class="pre">Previous</button>

 <div style="height: 1000px"/>
   <script src="dex.js">     
      </script> 
<script> 
$('.navbar-toggler').on('click',
    function(){$('.list-group').toggleClass('show');
        $('.po').toggleClass('po_1') });
    let 사진=1;
 $('.de-2').on('click',function(){$('.sl').css('transform','translateX(-100vw)'); 사진=2});
 $('.de-3').on('click',function(){$('.sl').css('transform','translateX(-200vw)'); 사진=3});    
 $('.de-1').on('click',function(){$('.sl').css('transform','translateX(0)');; 사진=1});     
 $('.next').on('click',function(){ if(사진==3){사진=0};
$('.sl').css('transform',`translateX(-${사진}00vw)`);사진++;
 });
    
 $('.pre').on('click',function(){
if(사진==1){$('.sl').css('transform','translateX(-200vw)');사진=3;
} else if(사진==2){$('.sl').css('transform','translateX(0vw)');사진--
} else if(사진==3){$('.sl').css('transform','translateX(-100vw)');사진-- 
 }});
    let ke=$('#ss').html();
let io=setInterval(op,1000);
    function op(){ke--;if(ke>=0){ $('#ss').html(ke)
}else{$('.alert-danger').hide();clearInterval(io)};console.log(ke)}

        let kj=0;
   $('#swer').on('click',function(){ kj++; if($('#ans').val()=='1335'){
       alert('SUCCESS')}else if(kj>2){alert('3회 실패'); kj=0} });
    
    let ct=0;
   $('.blur').on('click',function(){ ct++; if(ct%2==1){$('.blur').html('Light 🔄'); $('body').toggleClass('gl');$('nav').addClass('bg-dark navbar-dark')} else{$('.blur').html('Dark 🔄'); $('body').removeClass('gl'); $('nav').removeClass('bg-dark navbar-dark'); } });
 
    $('#girl6').on('click',function(){$('.black').addClass('dot')});
  $('#close').on('click',function(){$('.black').removeClass('dot')});
    $('#girl5').on('click',function(){$('h1').slideUp()});
    $('#girl4').on('click',function(){$('h1').fadeToggle()});
$('h1').html('chldudtjr');
document.getElementById('hello').style.color='orange';   
document.getElementById('op').innerHTML='JS 고수에요.';
 $('#hello').css('color','Lime');  
document.querySelectorAll('h1').forEach(d=>d.style.fontSize='16px')    
    document.getElementsByClassName('girl')[0].addEventListener('click',
function(){document.getElementsByClassName('aer')[0].innerHTML='ID 입력해쥬'});  
document.getElementsByClassName('girl1')[0].addEventListener('mouseover',
function(){document.getElementsByClassName('aer')[0].innerHTML='PW 입력해쥬'});
document.getElementById('girl2').addEventListener('click',
function(){document.getElementsByClassName('aer')[0].style.display='none'}); 
    document.getElementById('girl3').addEventListener('mouseover',
function(){document.getElementsByClassName('aer')[0].style.display='block',
          document.getElementsByClassName('aer')[0].innerHTML='알림창임'});  
   $(window).on('scroll', function(){  if($(window).scrollTop()>200){$('.navbar-brand').css('font-size','18px')}else{$('.navbar-brand').css('font-size','24px')}
}); 
let hasScrolled = false;
    $('.lorem').on('scroll', function(){  var 스크롤양 = $('.lorem').scrollTop();
  var 실제높이 = document.querySelector('.lorem').scrollHeight;
  var 높이 = document.querySelector('.lorem').clientHeight;
  if (!hasScrolled && 스크롤양 + 높이 > 실제높이 - 10){   alert('약관을 숙지 하셨습니까?'); hasScrolled=true };
       let ale=스크롤양/(실제높이-높이)*100; let ale_1=(ale/220)*100
    $('.nu_1').css('width',ale_1+'%')                                    });
 let hasScrolled_1 = false;
    $(window).on('scroll', function(){  var 스크롤양 = $('html').scrollTop();
  var 실제높이 = document.documentElement.scrollHeight;
  var 높이 = document.querySelector('html').clientHeight;
  if (!hasScrolled_1 && 스크롤양 + 높이 > 실제높이 - 50){   alert('site 방문에 감사합니다.'); hasScrolled_1=true};
    let ale=스크롤양/(실제높이-높이)*100;
    $('.nu').css('width',ale+'%')})
    </script>

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
dex.js
$('#na').on('change', function(){  console.log('안녕')});     
$('form').on('submit', function(w){ let tp=$('#na').val()
 if(tp==''){alert('ID must be filled out');w.preventDefault()
} else if(/\S@\S+\.\S/.test(tp)){} else{alert('이메일형식아님');w.preventDefault() }  });
 $('form').on('submit', function(w){ let ve=$('#do').val()
if(ve==''){alert('PW must be filled out');w.preventDefault()}; 
if(ve.length<6){alert('PW must be beyond six text');w.preventDefault()}; if(/[A-Z]/.test(ve)==false){alert('최소 영대문자 한자 포함 하십시오.');w.preventDefault() }});
안녕하세요. 선생님. js파일 분리하는걸 배워서, index.html 분리하려고 하는데, 
위에 분리한 부분은 작동이 잘 되는데, 그 아래에 있는,  <script>는 분리 시 작동을 안합니다.
왜 이렇게 되는건지, 도움 부탁드립니다. 
그리고 한가지 더 질문이 있는데요. 
.navbar { position:fixed 사용으로 겹칩현상이 발생하여,   ul::after {
    content: '';
    display: block;
    clear: both;
  } 이런식으로 줘봐도, 겹칩현상이 해결되지 않아 임시방편으로 .jh_1 { padding-top: 140px;z-index: 2  
css 로 해결을 하긴 했는데요.  position:fixed  의 겹침이 div박스에  display: block;
clear: both; 줘도 해결이 왜 안 되는 건지도 궁금합니다.
질문을 하게되어 죄송합니다. 감사합니다.

2023년 7월 27일 14:42 #92518

codingapple

키 마스터

script 태그는 <body>태그 끝나기 전에 넣읍시다 
clear:both는 float 문제 해결할 때 씁니다 navbar밑에있는 박스에 margin-top 줍시다

글쓴이

글

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

답변은 로그인 후 가능합니다.

로그인

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png