onclick 이벤트가 변경 사항을 영구적으로 유지하지 않음

Question

옵션 사용자 선택에 따라 div의 내용을 변경해야하는 웹 사이트를 구축 중입니다. 사용자가 앵커 onclick 이벤트 핸들러를 클릭하면 div가 올바르게 변경되지만 즉시 변경됩니다. 나는 코드에 어떤 문제가 있는지 이해하지 못한다. 코드는 다음과 같습니다.

<div id="main-content"> 
    <p id="para" style="display:block; width:200px; height:30px; text-align:center;margin:15px auto;">Choose an Option:</p> 
    <a href="" id="add-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Add Student</a> 
    <a href="" onClick="addStudent();" id="delete-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Delete Student</a> 
</div> 

<script type="text/javascript"> 
    function addStudent(){ 
     d1 = document.getElementById('main-content'); 
     d2 = document.getElementById('add-student'); 
     d3 = document.getElementById('delete-student'); 
     d4 = document.getElementById('para'); 
     d2.style.display = "none"; 
     d3.style.display = "none"; 
     d4.style.display = "none";  

     d1.innerHTML = "<p>Hello World</p>"; 
} 
</script> 

도움이 되겠습니다. 합니다 (Delete Student 버튼) 당신의 addStudent() 코드를 실행 한 후에는

Answer 1

앵커의 기본 동작은 새 페이지로 리디렉션하는 것입니다.

함수에서 false를 반환하고 처리기를 클릭하면이 문제를 방지 할 수 있습니다. 당신이 오류를 얻는 경우

function addStudent() { 
 
    d1 = document.getElementById('main-content'); 
 
    d2 = document.getElementById('add-student'); 
 
    d3 = document.getElementById('delete-student'); 
 
    d4 = document.getElementById('para'); 
 
    d2.style.display = "none"; 
 
    d3.style.display = "none"; 
 
    d4.style.display = "none"; 
 

 
    d1.innerHTML = "<p>Hello World</p>"; 
 
    return false; 
 
}

<div id="main-content"> 
 
    <p id="para" style="display:block; width:200px; height:30px; text-align:center;margin:15px auto;">Choose an Option:</p> 
 
    <a href="" id="add-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Add Student</a> 
 

 
    <a href="" onClick="return addStudent();" id="delete-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Delete Student</a> 
 

 
</div>

Answer 2

는, 클릭 이벤트가 "완료"를 <a href="" 속성에 지정된 주소를로드하여 - 페이지가 바로 다시로드하므로이 경우에는, 그것은 빈입니다. 이를 방지하려면 false을 onclick에서 반환하십시오.

function addStudent(){ 
 
d1 = document.getElementById('main-content'); 
 
d2 = document.getElementById('add-student'); 
 
d3 = document.getElementById('delete-student'); 
 
d4 = document.getElementById('para'); 
 
d2.style.display = "none"; 
 
d3.style.display = "none"; 
 
d4.style.display = "none"; 
 

 
d1.innerHTML = "<p>Hello World</p>"; 
 

 
}

<div id="main-content"> 
 
<p id="para" style="display:block; width:200px; height:30px; text-align:center;margin:15px auto;">Choose an Option:</p> 
 
<a href="" id="add-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Add Student</a> 
 
<a href="" onClick="addStudent(); return false;" id="delete-student" style="display:block; width:200px; height:30px; text-align:center;background:rgba(19,7,163,0.30); margin:10px auto; padding-top:15px">Delete Student</a> 
 
</div>