Question 291089 in Html Question posted in
Some basic documentation can be found here.

Html – i want to update un var inside a url after click on one of button too use outiside the scope in the fetch

i want to update the url with different value depend with button you click to use after outside in the fetch primary objectif is to have variable who are update when click that i can use inside the url who change when click on button and the url i can implement after in other function with the value update

var elementId = "";
var url = ""; // Variable globale pour stocker l'URL

function updateElementId(element) {
  elementId = element.value;

  test();

  return elementId;
}

function test() {
  url = `https://v3.football.api-sports.io/standings?league=${elementId}&season=2023`;
  return url;
}
console.log(url);
console.log(test());

console.log(test());

<div>
  <button id="button1" value="5" onclick="updateElementId(this)">
    Bouton 1
  </button>
  <button id="button2" value="45" onclick="updateElementId(this)">
    Bouton 2
  </button>
  <button id="button3" value="3" onclick="updateElementId(this)">
    Bouton 3
  </button>
  <button id="button4" value="75" onclick="updateElementId(this)">
    Bouton 4
  </button>
  <button id="button5" value="42" onclick="updateElementId(this)">
    Bouton 5
  </button>
</div>

i want to update the url when click on the button and change the value in var inside the url to use in the fetch after

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    const baseUrl = "https://v3.football.api-sports.io/standings";
const output = document.querySelector("output");

function updateAndFetch(leagueValue) {
  const url = `${baseUrl}?league=${leagueValue}&season=2023`;

  fetch(url, {
    method: "GET",
    headers: {
      "x-rapidapi-host": "v3.football.api-sports.io",
      "x-rapidapi-key": ""
    }
  })
  .then(response => response.json())
  .then(data => {
    // Faites quelque chose avec les données, par exemple, afficher dans la console
    console.log(data);
   
  })
  .catch(error => {
    console.error("Une erreur s'est produite lors de la récupération des données :", error);
  });
}

    its working well


  2. 0

    You can certainly maintain a URL in-memory and alter its query parameters by pressing buttons.

    I’d recommend using event delegation to keep the event listeners clean

    // for displaying debugging only
const output = document.querySelector("output");

// this is your top-scoped URL
const url = new URL("https://v3.football.api-sports.io/standings?season=2023");

document
  .getElementById("league-buttons")
  .addEventListener("click", ({ target }) => {
    // find the button clicked
    const btn = target.closest("button.league[value]");
    if (btn) {
      // set the URL "league" query parameter
      url.searchParams.set("league", btn.value);

      // This is just for debugging to show you the URL changed
      output.textContent = url.toString();
    }
  });
    <div id="league-buttons">
  <button id="button1" type="button" class="league" value="5">
    Bouton 1
  </button>
  <button id="button1" type="button" class="league" value="45">
    Bouton 2
  </button>
  <button id="button1" type="button" class="league" value="3">
    Bouton 3
  </button>
  <button id="button1" type="button" class="league" value="75">
    Bouton 4
  </button>
  <button id="button1" type="button" class="league" value="42">
    Bouton 5
  </button>
</div>

<p><output /></p>

    Then you can use url in your fetch() calls, triggered however you want

    <button id="fetch-data" type="button">Fetch data</button>

    document.getElementById("fetch-data").addEventListener("click", async () => {
  const res = await fetch(url);
  // ...
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search