它改变了一个时间之后如何刷新网页？

问题描述 投票：16回答：7

 

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.
javascript html html5 refresh webpage
7个回答
15
投票

不能真正明白，为什么你会需要这样一个不起眼的方式做到这一点的，什么是.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">
7
投票

所以，我不是你为什么要去关于这个问题，指出（另一个例子可以帮助）完全清楚，但你可以摆脱错误的，并实现与下面的代码的功能：

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">
6
投票

与你的代码的问题，据我所知道的是，你得到这个错误：

遗漏的类型错误：无法读取空的财产“的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">

希望这有助于！

1
投票

你可以注册文档对象上的监听器和过滤掉其它任何点击，但所需的。然后，避免任何听者添加/移除和整个逻辑可以在一个范围内，在一个地方。

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">
1
投票

尝试这个：

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);
0
投票

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

第一个解决方案：

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">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.