javascript - refrescar - ¿Cómo actualizar la página web después de cambiarla una vez?

refrescar pagina javascript onclick

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

Al hacer clic en la entrada, se convirtió en:

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

Mi requisito es escribir el código javascript para que cuando haga clic en la entrada cuya ID sea la second , la página web se actualizará. Es decir, para cambiar el elemento de entrada actual:

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

en el anterior

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

Aquí está mi intento:

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

El problema con su código, por lo que puedo decir, es que está recibiendo este error:

No se detectó TypeError: no se puede leer la propiedad "addEventListener" de null

Y está en esta línea:

ob.addEventListener("click", previous);

Esto es porque la línea de arriba, ob se redefine para ser esto:

ob = document.getElementById("second");

Debido a que un elemento con id="second" solo se crea en la función change() , esta línea causa errores porque realmente se ejecuta antes de que se ejecute change() , lo que significa que su código se detiene tan pronto como se ejecuta.

En resumen, debes colocar estas dos líneas:

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

Dentro de la función change() , tu código debería verse así:

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

Y la otra cosa que debes hacer es usar location.reload() para volver a cargar la página:

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

Sin embargo, si solo quisieras hacer esto:

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

Dentro de esto:

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

Dentro de su función previous() , todo lo que tiene que hacer es hacer que su función previous() vea así:

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

(He estructurado el previous() o menos igual que el change() para que sea más fácil para sus propósitos de depuración)

Después de que todo su código haya sido modificado y mejorado, el fragmento de trabajo final tiene el siguiente aspecto:

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

Esperemos que esto ayude!

Answer 2

Por lo tanto, no estoy del todo claro por qué está haciendo esto como se indica (otro ejemplo puede ayudar), pero puede deshacerse del error e implementar su funcionalidad con el siguiente código:

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 3

Primera solución:

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

Segunda solución si solo quieres un botón:

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 4

Puede registrar un oyente en el objeto de documento y filtrar cualquier otro clic que no sea el deseado. A continuación, evita que el oyente agregue / elimine y toda la lógica puede estar en un lugar dentro de un ámbito.

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

Realmente no puedo entender, ¿por qué necesitaría una forma tan oscura de hacer esto y qué se .execCommand("Refresh") que significa .execCommand("Refresh") ? execCommand documentación de execCommand ni siquiera incluye la refresh como una opción; por estas lineas:

item = document.getElementById("first");
ob = document.getElementById("second");

En el primer caso, cuando intenta cambiar el val y la id del elemento por segunda vez, ya tiene otra id (modificada por el primer uso de la función)

En el segundo caso, intenta vincular un detector de eventos al elemento que está ausente en la página en el momento de la ejecución de esa línea.

Si yo fuera tú, habría escrito algo así (asumiendo que por alguna razón realmente necesitas cambiar la identificación del objeto):

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

prueba esto:

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