Question 186169 in Javascript Question posted in
A very good W3school tutorial can be found here.

Problem with box when I refresh my page in Javascript

I have a problem with my program because I have buttons which work with a prompt() but when I refresh my page, it’s like the prompt work also because the box appears before I can access my page.(it’s a french program)

Here the HTML program

Here the JS field:

// Tableau pour stocker les éléments
    var elements = [];

// Fonction pour afficher la liste d'éléments
function afficherListe() {
    var listeDiv = document.getElementById("liste");
    listeDiv.innerHTML = "";

    for (var i = 0; i < elements.length; i++) {
      var elementDiv = document.createElement("div");
      elementDiv.textContent = elements[i];
      listeDiv.appendChild(elementDiv);
    }
  }

// Fonction pour ajouter un élément à la liste
  function ajouterElement() {
    var nouvelElement = prompt("Entrez un nouvel élément :");
    if (nouvelElement) {
      elements.push(nouvelElement);
      afficherListe();
    }
  }

// Fonction pour modifier un élément existant dans la liste
  function modifierElement() {
    var ancienneValeur = prompt("Entrez la valeur à modifier :");
    var index = elements.indexOf(ancienneValeur);
    
    if (index !== -1) {
      var nouvelElement = prompt("Entrez la nouvelle valeur de l'élément :");
      if (nouvelElement !== null) {
        elements[index] = nouvelElement;
        afficherListe();
      }
    } else {
      alert("L'élément avec la valeur spécifiée n'a pas été trouvé dans la liste.");
    }
  }

// Fonction pour supprimer un élément de la liste
  function supprimerElement() {
    var supValeur = prompt("Entrez la valeur de l'élément à supprimer :");
    var index = elements.indexOf(supValeur);
    if (index !== -1) {
      elements.splice(index, 1);
      afficherListe();
    }
  }
Tags:

2

Answers


  1. 0

    Your <script> tags are executing your functions ajouterElement, modifierElement, and supprimerElement when your page is loaded. If you remove these from the script tags, then they will only be invoked when your onclick events fire.

    Login or Signup to reply.
  2. 0

    You only want the prompts when the buttons are clicked

    Here is a version using delegation instead of inline event handling.

    window.addEventListener("DOMContentLoaded", () => {
  // Tableau pour stocker les éléments
  const elements = [];
  const listeDiv = document.getElementById("liste");

  // Fonction pour afficher la liste d'éléments
  const afficherListe = () => {
    listeDiv.innerHTML = "";
    for (let i = 0; i < elements.length; i++) {
      let elementDiv = document.createElement("div");
      elementDiv.textContent = elements[i];
      listeDiv.appendChild(elementDiv);
    }
  }
  document.getElementById("buttons").addEventListener("click", (e) => {
    const tgt = e.target.closest("button");
    if (!tgt) return; // not a button

    // Fonction pour ajouter un élément à la liste
    if (tgt.matches("#btn-ajouter")) {
      let nouvelElement = prompt("Entrez un nouvel élément :");
      if (nouvelElement) {
        if (elements.indexOf(nouvelElement) === -1) {
          elements.push(nouvelElement);
        } else {
          alert("L'élément avec la valeur spécifiée est deja trouvé dans la liste.");
        }
      }
    } else if (tgt.matches("#btn-modifier")) {
      // Fonction pour modifier un élément existant dans la liste
      let ancienneValeur = prompt("Entrez la valeur à modifier :");
      if (!ancienneValeur) return;
      let index = elements.indexOf(ancienneValeur);

      if (index !== -1) {
        let nouvelElement = prompt("Entrez la nouvelle valeur de l'élément :");
        if (nouvelElement !== null) {
          elements[index] = nouvelElement;
          afficherListe();
        }
      } else {
        alert("L'élément avec la valeur spécifiée n'a pas été trouvé dans la liste.");
      }
    } else if (tgt.matches("#btn-supprimer")) {
      // Fonction pour supprimer un élément de la liste
      let supValeur = prompt("Entrez la valeur de l'élément à supprimer :");
      if (supValeur) {
        let index = elements.indexOf(supValeur);
        if (index !== -1) {
          elements.splice(index, 1);
        }
      } else {
        alert("L'élément avec la valeur spécifiée n'a pas été trouvé dans la liste.");
      }
    }
    afficherListe();
  });
});
    <h1>Liste d'éléments</h1>
<div id="liste"></div>
<div id="buttons">
  <button id="btn-ajouter">Ajouter</button>
  <button id="btn-modifier">Modifier</button>
  <button id="btn-supprimer">Supprimer</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search