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">
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">
На самом деле не могу понять, зачем вам нужен такой неясный способ сделать это и что такое .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">
Итак, я не совсем понимаю, почему вы делаете это, как уже отмечалось (другой пример может помочь), но вы можете избавиться от ошибки и реализовать свои функциональные возможности с помощью приведенного ниже кода:
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">
Насколько я могу судить, проблема с вашим кодом в том, что вы получаете эту ошибку:
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">
попробуй это:
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);
Вы можете зарегистрировать слушателя на объекте документа и отфильтровать любые другие клики, кроме желаемых. Затем вы избегаете добавления/удаления любого слушателя, и вся логика может быть в одном месте в одной области видимости.
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">
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');
}
Первое решение:
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;">