javascript - 프로그램 - 페이지 변경 없이 url 변경




한 번 변경된 후 웹 페이지를 새로 고치는 방법은 무엇입니까? (5)

 

function change(){
    item = document.getElementById("first");
    item.value = "second";
    item.id = "second";
}

ob = document.getElementById("first");
ob.addEventListener("click",change); 

 
 
<input id="first" type="button" value="first"> 
 

입력을 클릭하면 다음과 같이 바뀝니다.

<input id="second" type="button" value="second"> 

내 요구 사항은 javascript 코드를 작성하여 ID가 second 인 입력을 클릭하면 웹 페이지가 새로 고쳐집니다. 즉 현재 입력 요소를 변경하는 것입니다.

<input id="second" type="button" value="second"> 

이전 :

<input id="first" type="button" value="first"> 

여기 내 시도입니다 :

 

function change(){
    item = document.getElementById("first");
    item.value = "second";
    item.id = "second";
}

ob = document.getElementById("first");
ob.addEventListener("click",change); 

function previous(){
    document.execCommand('Refresh') 
}

ob = document.getElementById("second");
ob.addEventListener("click",previous); 
 
   <input id="first" type="button" value="first"> 

error:  Uncaught TypeError: Cannot read property 'addEventListener' of null
at  line27.

그래서, 내가 다른 이유에 대해 언급 한 바와 같이 왜이 일을하는지 명확하게 알 수는 없지만 다음 코드를 사용하여 오류를 제거하고 기능을 구현할 수 있습니다.

function change(){
  var item = document.getElementById("first");
  item.value = "second";
  item.id = "second";
  item.removeEventListener("click", change);
  item.addEventListener("click", refresh);
}

function refresh(){
  document.location.reload();
}

var ob = document.getElementById("first");
ob.addEventListener("click",change); 
 
<input id="first" type="button" value="first"> 


내가 알 수있는 한 코드의 문제점은이 오류가 발생한다는 것입니다.

잡히지 않은 TypeError : null의 속성 "addEventListener"를 읽을 수 없습니다.

그리고 그것은이 줄에 있습니다 :

ob.addEventListener("click", previous);

위의 줄에서 ob 가 다음과 같이 재정의 되었기 때문입니다.

ob = document.getElementById("second");

id="second" 가진 요소는 change() 함수에서만 생성되기 때문에이 라인은 change() 가 실행되기 전에 실제로 실행되기 때문에 오류가 발생합니다. 즉, 코드가 실행 되 자마자 중지됩니다.

즉, 다음 두 줄을 배치해야합니다.

var ob = document.getElementById("second");
ob.addEventListener("click", previous);

change() 함수 안에서 코드는 다음과 같이 보일 것입니다.

ob = document.getElementById("first");
ob.addEventListener("click", change);

function change() {
  item = document.getElementById("first");
  item.value = "second";
  item.id = "second";
  ob = document.getElementById("second");
  ob.addEventListener("click", previous);
}

function previous() {
  document.execCommand('Refresh')
}
<input id="first" type="button" value="first">

그리고 당신이해야 할 다른 일은 페이지를 다시로드하기 위해 location.reload() 를 사용하는 것입니다 :

ob = document.getElementById("first");
ob.addEventListener("click", change);

function change() {
    item = document.getElementById("first");
    item.value = "second";
    item.id = "second";
    ob = document.getElementById("second");
    ob.addEventListener("click", previous);
}

function previous() {
    location.reload();
}
<input id="first" type="button" value="first">

그러나, 당신이 이것을 만들고 싶다면 :

<input id="second" type="button" value="second">

이걸로 :

<input id="first" type="button" value="first">

previous() 함수 안에서 previous() 함수를 다음과 같이 만들면된다.

function previous() {
    item = document.getElementById("second");
    item.value = "first";
    item.id = "first";
    ob = document.getElementById("first");
    ob.addEventListener("click", change);
}

( previous() 디버깅을 쉽게하기 위해 change() 와 거의 동일하게 구조화했습니다)

모든 코드가 수정되고 개선 된 후 최종 작업 조각은 다음과 같습니다.

var ob = document.getElementById("first");
ob.addEventListener("click", change);

function change() {
    item = document.getElementById("first");
    item.value = "second";
    item.id = "second";
    ob = document.getElementById("second");
    ob.addEventListener("click", previous);
}

function previous() {
    item = document.getElementById("second");
    item.value = "first";
    item.id = "first";
    ob = document.getElementById("first");
    ob.addEventListener("click", change);
}
<input id="first" type="button" value="first">

잘하면이 도움이됩니다!


실제로 이것을 이해할 수없는 이유는 무엇입니까? 그리고 .execCommand("Refresh") 심지어 execCommand 문서에서 refresh 을 옵션으로 나열하지 않는데도 오류가 발생합니다. 다음 행에 의해 :

item = document.getElementById("first");

ob = document.getElementById("second");

첫 번째 경우에는 항목의 valid 를 두 번째로 변경하려고 할 때 이미 다른 id (첫 번째 함수 사용에 의해 변경됨)가 있습니다.

두 번째 경우에는 해당 라인 실행 순간에 페이지에없는 요소에 이벤트 리스너를 바인딩하려고합니다.

내가 너라면, 나는 이런 식으로 글을 쓰려고했을 것이다. (어떤 이유로 당신은 실제로 그 객체의 id를 바꿀 필요가 있다고 가정한다.)

ob = document.getElementById('first');

ob.addEventListener('click',function(){
  if (this.id=='first') {
    this.id = 'second';
    this.value = 'second';
  } else {
    location.reload();
  }
});
<input id="first" type="button" value="first">


이 시도:

function change() {
    item = document.getElementById("first");
    item.value = "second";
    item.id = "second";
    if(item.id == "second"){
        location.reload();  // only reload if changed
    }
}

ob = document.getElementById("first");
ob.addEventListener("click", change); 

var item = document.getElementById("first");
		function change(){
		    item.value = "second";
		    item.id = "second";
		    var second = document.getElementById("second");
			second.addEventListener("click",previous); 
		}
		item.addEventListener("click",change); 
		
		function previous(){
		    console.log(1);
		    //document.execCommand('Refresh');
		}







refresh