Как обновить веб-страницу после ее однократного изменения?

Ответ 1

На самом деле не могу понять, зачем вам нужен такой неясный способ сделать это и что такое .execCommand("Refresh") даже должно означать - документация execCommand даже не перечисляет refresh в качестве опции, однако ваши ошибки вызваны по этим линиям:

item = document.getElementById("first");

ob = document.getElementById("second");

В первом случае, когда вы пытаетесь изменить элемент val и 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">

Ответ 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"> 

Ответ 3

Насколько я могу судить, проблема с вашим кодом в том, что вы получаете эту ошибку:

Uncaught TypeError: Невозможно прочитать свойство "addEventListener" из null

И это на этой линии:

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

Ответ 4

попробуй это:

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

Ответ 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">

Ответ 6

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

Ответ 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;">