web-dev-qa-db-fra.com

Comment actualiser la page Web après l'avoir modifiée une fois?

 

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

Lorsque vous cliquez sur l'entrée, celle-ci devient:

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

Mon exigence est d'écrire du code JavaScript afin que lorsque vous cliquez sur l'entrée dont l'id est second, la page Web s'actualise. C'est-à-dire pour changer l'élément d'entrée actuel:

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

dans le précédent:

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

Voici mon essai:

 

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.
javascripthtmlhtml5refreshwebpage
16
scrapy

Vous ne pouvez pas réellement comprendre pourquoi vous auriez besoin d’une méthode aussi obscure et ce que signifie .execCommand("Refresh") même supposé - La documentation execCommand ne mentionne même pas refresh comme option. Cependant, vos erreurs sont causées par ces lignes:

item = document.getElementById("first");

ob = document.getElementById("second");

Dans le premier cas, lorsque vous essayez de modifier les éléments val et id de l'élément une seconde fois, il en existe déjà un autre id (modifié par la première utilisation de la fonction)

Dans le second cas, vous essayez de lier un écouteur d'événement à l'élément qui est absent de la page au moment de l'exécution de cette ligne.

Si j'étais vous, j'aurais écrit comme ceci (en supposant que, pour une raison quelconque, vous ayez vraiment besoin de changer l'identifiant de l'objet):

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

15
haldagan

Donc, je ne comprends pas tout à fait pourquoi vous vous en tenez à ce sujet (un autre exemple peut aider), mais vous pouvez vous débarrasser de l'erreur et implémenter vos fonctionnalités avec le code ci-dessous:

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

7
willascend

Le problème avec votre code, pour autant que je sache, est que vous obtenez cette erreur:

Uncaught TypeError: impossible de lire la propriété "addEventListener" de null

Et c'est sur cette ligne:

ob.addEventListener("click", previous);

En effet, la ligne ci-dessus, ob, est redéfinie comme suit:

ob = document.getElementById("second");

Etant donné qu'un élément avec id="second" est créé uniquement dans la fonction change(), cette ligne génère des erreurs car elle est réellement exécutée avant l'exécution de change(), ce qui signifie que votre code s'arrête dès qu'il est exécuté. 

En bref, vous devez placer ces deux lignes:

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

Dans la fonction change(), votre code devrait ressembler à ceci:

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

Et l’autre chose à faire est d’utiliser location.reload() pour recharger la 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">

Cependant, si vous vouliez juste faire ceci:

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

Dans ceci:

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

Dans votre fonction previous(), il ne vous reste plus qu'à donner à votre fonction previous() l'apparence suivante:

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

(J'ai structuré previous() à peu près la même chose que change() pour le rendre plus facile pour vos besoins de débogage)

Une fois que tout votre code a été modifié et amélioré, l’extrait final fonctionnel ressemble à ceci:

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

Espérons que cela aide!

6
Jack Bashford

essaye ça:

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);
1
Rubin bhandari

Vous pouvez enregistrer un écouteur sur l'objet de document et filtrer tous les autres clics que ceux souhaités. Vous évitez ensuite tout ajout/suppression d'écoute et toute la logique peut se trouver à un endroit dans une portée.

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

1
Jiří Peterek

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

0
李万金

Première 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;">

Deuxième solution si vous voulez juste un bouton:

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

0
Margulan Zharkenov