How to refresh the web page after it is changed one time?

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

When you click the input, it turned into:

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

My requirement is to write javascript code so that when you click the input whose id is second, the web page will refresh. That is to say, to change the current input element:

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

into the previous:

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

Here is my try:

 

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

First solution:

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

Second solution if you want just one button:

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

Answer 2

try this:

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 3

The problem with your code, as far as I can tell, is that you're getting this error:

Uncaught TypeError: Cannot read property "addEventListener" of null

And it is on this line:

ob.addEventListener("click", previous);

This is because the line above, ob is redefined to be this:

ob = document.getElementById("second");

Because an element with id="second" is only created in the function change(), this line is causing errors because it is actually executed before change() is run, meaning that your code stops as soon as it runs.

In short, you should place these two lines:

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

Inside the change() function, so your code should look like so:

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

And the other thing you should do is use location.reload() for reloading the page:

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

---

However, if you just wanted to make this:

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

Into this:

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

Inside your previous() function, then all you have to do is make your previous() function look like this:

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

(I have structured previous() pretty much the same as change() to make it easier for your debugging purposes)

After all of your code has been modified and improved, the final, working snippet looks like this:

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

Hopefully this helps!

Answer 4

You can register a listener on the document object and filter out any other clicks but the desired ones. You then avoid any listener adding/removing and the whole logic can be in one place within one scope.

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 5

So, I'm not entirely clear on why you're going about this as noted (another example may help), but you can get rid of the error and implement your functionality with the below code:

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 6

Can't actually understand, why would you need such an obscure way to do this and what does .execCommand("Refresh") even supposed to mean - execCommand documentation doesn't even list refresh as an option, however, your errors are caused by these lines:

item = document.getElementById("first");

ob = document.getElementById("second");

In the first case, when you try to change the item's val and id the second time - it already has another id (changed by the first function use)

In the second case you try to bind an event listener to the element which is absent on the page at the moment of that line execution.

If I were you, I would've written smth like this (assuming that for some reason you really need to change the object's 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 7

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