网页修改一次后如何刷新？

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（由第一个函数使用更改）

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

如果我是你，我会这样写（假设出于某种原因你确实需要更改对象的 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

据我所知，您的代码的问题在于您遇到了这个错误：

未捕获的类型错误：无法读取 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() 几乎相同，以便更轻松地进行调试）

在修改和改进所有代码之后，最终的工作 sn-p 如下所示：

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

Answer 5

您可以在文档对象上注册一个侦听器并过滤掉除所需点击之外的任何其他点击。然后，您可以避免添加/删除任何侦听器，整个逻辑可以在一个范围内的一个位置。

document.addEventListener('click', e => {
  const options = ['first', 'second']
  const t = e.target
  if (!~options.indexOf(t.id)) return

  const selected = options[Number(t.id === options[0])] // truthy value (t.id === 'first') is converted to 1 which selects the 'second' item, falsy does the opposite
  
  t.id = selected
  t.value = selected
  // do another stuff
})

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

Answer 6

试试这个：

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

Answer 7

第一个解决方案：

var element_1 = document.getElementById("first"),
    element_2 = document.getElementById("second");

element_1.addEventListener("click", function(){
    element_1.style.display = "none";
    element_2.style.display = "";
});
element_2.addEventListener("click", function(){
    element_2.style.display = "none";
    element_1.style.display = "";
});

<input id="first" type="button" value="first">
<input id="second" type="button" value="second" style="display: none;"> 

如果您只需要一个按钮，则第二种解决方案：

var current_id = "first";

function changeBtn() {
    document.getElementById(current_id).removeEventListener("click", changeBtn);
    document.getElementById(current_id).value = current_id === "first" ? "second" : "first";
    document.getElementById(current_id).id = current_id === "first" ? "second" : "first";
    current_id = current_id === "first" ? "second" : "first";
    addClickEvent();
}

function addClickEvent() {
    document.getElementById(current_id).addEventListener("click", changeBtn);
}

addClickEvent();

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