как перезагрузить windows с обновлением URL в javascript

Question

у меня есть три кнопки, поэтому, когда я нажимаю на button1, этот вызов функции кнопки и сохранение строкового значения в конечной точке и windows должны перезагружаться с обновленными данными ... поэтому обновленный URL-адрес должен быть https://api_url_here / национальный

, но проблема в том, что windows не перекодирует с обновленным значением

var btn1 = document.querySelector(".btn1");
var endpoint = [];
console.log(endpoint);
fetch(`https://api_url_here/${endpoint}`)
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Something went wrong");
    }
  })
  .then((newsData) => {
   console.log(newsData);
    })

btn1.addEventListener("click", function () {
    endpoint = "national";
    console.log(endpoint);
});

        <div class="menu">
          <button class="btn1">national</button>
          <button class="btn2">buisness</button>
          <button class="btn3">politics</button>
        </div>

Answer 1

Вы должны вызвать свой API после нажатия кнопки . В настоящее время он называется до того, как это произойдет .

Я предлагаю обернуть вызов fetch() в функцию, чтобы сделать ваш код более универсальным. Кроме того, вы можете прикрепить событие ко всем своим кнопкам и вызвать новую функцию следующим образом:

var btn1 = document.querySelectorAll(".btn1");

btn1.forEach(function (btn) {
  btn.addEventListener("click", function (e) {
    callAPI(e.target.value);
  });
});

function callAPI(endpoint) {
  fetch(`https://api_url_here/${endpoint}`)
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Something went wrong");
    }
  })
  .then((newsData) => {
   console.log(newsData);
  })
}

<div class="menu">
          <button class="btn1" value="national">national</button>
          <button class="btn1" value="business">buisness</button>
          <button class="btn1" value="politics">politics</button>
        </div>

Answer 2

Необходимо использовать querySelectorAll для получения всех кнопок и привязки события к каждой из них:

var buttons = document.querySelectorAll(".menu-button");
function fetchData(endpoint) {
    fetch(`https://api_url_here/${endpoint}`).then((response) => {
        if (response.ok) {
            return response.json();
        } else {
            throw new Error("Something went wrong");
        }
    })
    .then((newsData) => {
        console.log(newsData);
    });
}

buttons.forEach(b => b.addEventListener("click", function (event) {
    fetchData(event.target.getAttribute("data-value"));
}));

HTML:

<div class="menu"> 
    <button class="menu-button" data-value="national">national</button> 
    <button class="menu-button" data-value="business">business</button> 
    <button class="menu-button" data-value="politics">politics</button> 
</div>