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

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, чтобы при нажатии кнопкивведите, чей идентификатор 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

Вы можете зарегистрировать слушателя на объекте документа и отфильтровать любые другие клики, кроме желаемых.Затем вы избегаете добавления / удаления любого слушателя, и вся логика может быть в одном месте в одной области видимости.

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 2

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

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

И еще одна вещь, которую вы должны сделать, это использовать 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 3

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

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 4

Итак, я не совсем понимаю, почему вы делаете это, как уже отмечалось (другой пример может помочь), но вы можете избавиться от ошибки и реализовать свои функциональные возможности с помощью приведенного ниже кода:

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 5

На самом деле не могу понять, зачем вам такой неясный способ сделать это и что .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">

Answer 6

Первое решение:

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

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