如何在更改网页一次后刷新网页？

Question

 

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.

Answer 1

实际上无法理解,为什么你需要这样一个模糊的方法来做这个.execCommand("Refresh")甚至应该意味着什么- execCommand文档甚至不refresh作为一个选项列出,但是,你的错误是由这些行引起的:

item = document.getElementById("first");

ob = document.getElementById("second");

在第一种情况下,当您尝试更改项目时val,id第二次 - 它已经有另一个id(由第一个函数使用更改)

在第二种情况下,您尝试将事件侦听器绑定到该行执行时页面上不存在的元素.

如果我是你,我会写这样的smth(假设由于某种原因你真的需要改变对象的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">

Answer 2

所以,我并不完全清楚为什么你要注意这个(另一个例子可能有帮助),但你可以通过以下代码摆脱错误并实现你的功能:

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"> 

Answer 3

据我所知,您的代码存在的问题是您收到此错误:

未捕获的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">

希望这有帮助!

Answer 4

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');
		}