javascript - 我需要在 JS 中的 url 旁边添加 HTML "value"的 "select/option"。您知道该怎么做吗？

Question

示例: newurl = url + '&类别= 9' + '&难度=困难'

这个想法是形成一个新的 url，它将被另一个调用它的函数占用。

在这里我需要写这个例子，另外我用西类牙语和英语写了一条评论......我希望它能被理解。 我只需要它来完成代码。

index.html

<form name="formul1" class="cont">       
          <select id="cat" name="cat" onchange="selectCat()">
            <option value="">Any Category</option>
            <option value="&category=9">General Knowledge</option>
            <option value="&category=10">Entertaiment: Books</option>
            <option value="&category=11">Entertaiment: Film</option>
            <option value="&category=12">Entertaiment: Music</option>
            <option value="&category=13">Entertaiment: Musicals & Theatres</option>
            <option value="&category=14">Entertaiment: Television</option>
            <option value="&category=15">Entertaiment: Video Games</option>
            <option value="&category=16">Entertaiment: Board Games</option>
            <option value="&category=17">Science & Nature</option>
            <option value="&category=18">Science: Computers</option>
            <option value="&category=19">Science: Mathematics</option>
            <option value="&category=20">Mythology</option>
            <option value="&category=21">Sports</option>
            <option value="&category=22">Geography</option>
            <option value="&category=23">History</option>
            <option value="&category=24">Politics</option>
            <option value="&category=25">Art</option>
            <option value="&category=26">Celebrities</option>
            <option value="&category=27">Animals</option>
            <option value="&category=28">Vehicles</option>
            <option value="&category=29">Entertaiment: Comics</option>
            <option value="&category=30">Science: Gadgets</option>
            <option value="&category=31">Entertaiment: Japanese Anime & Manga</option>
            <option value="&category=32">Entertaiment: Cartoon & Animations</option>
          </select>
        </form>     
        <h5>Select Difficulty:</h5>
        <form name="formul2" class="cont">          
          <select id="diff" name="diff" onchange="selectDiff()">
            <option value="">Any Difficulty</option>
            <option value="&difficulty=easy">Easy</option>
            <option value="&difficulty=medium">Medium</option>
            <option value="&difficulty=hard">Hard</option>
          </select>
        </form>   

game.js

    var btnFetch = document.getElementById('fetch');

  btnFetch.addEventListener('click', function(e) {
    console.log('Would fetch newUrl:', newUrl);
    fetch(newUrl)
  .then(res => {
    return res.json();
  })
  .then(loadedQuestions => {
    console.log(loadedQuestions.results);
    questions = loadedQuestions.results.map(loadedQuestion => {
      const formattedQuestion = {
        question: loadedQuestion.question
      };

      const answerChoices = [...loadedQuestion.incorrect_answers];
      formattedQuestion.answer = Math.floor(Math.random() * 3) + 1;
      answerChoices.splice(
        formattedQuestion.answer - 1,
        0,
        loadedQuestion.correct_answer
      );

      answerChoices.forEach((choice, index) => {
        formattedQuestion["choice" + (index + 1)] = choice;
      });

      return formattedQuestion;
    });

    startGame();
  })
  .catch(err => {
    console.error(err);
  });
});

Answer 1

只需添加一个对象来保存值，onchange 更新其值，然后 join() 它们 - 并将此 newUrl 传递给获取函数。

// var url = 'https://opentdb.com/api.php?amount=20';
//SELECT CATEGORY
//CATEGORY => 8, 9, 10, 11, ..., 32

const obj = {
  url: 'https://opentdb.com/api.php?amount=20',
  difficulty: '',
  category: ''
}
let newUrl = Object.values(obj).join('')

function selectCat() {
  var c = document.getElementById("cat").value;
  console.log(c);
  obj.category = c
  newUrl = Object.values(obj).join('')
  // return c;
}

//SELECT DIFFICULTY
//DIFFICULTY => any, easy, medium, hard
function selectDiff() {
  var d = document.getElementById("diff").value;
  console.log(d);
  obj.difficulty = d
  newUrl = Object.values(obj).join('')
  // return d;
}

/*ANIDAR VALUE DE CATTEGORY Y DIFFICULTY 
  JUNTO A LA URL PARA OBTENER LA NEWURL 

  NEST VALUE TO CATEGORY AND DIFFICULTY
  NEXT TO THE URL TO GET THE NEWURL*/

// click event on button
const btnFetch = document.getElementById('fetch')

btnFetch.addEventListener('click', function(e) {
  console.log('Would fetch newUrl:', newUrl)
  // fetch(newUrl).then(res => {})
})

<button id="fetch">FETCH URL</button><br /><br />

<form name="formul1" class="cont">
  <select id="cat" name="cat" onchange="selectCat()">
    <option value="">Any Category</option>
    <option value="&category=9">General Knowledge</option>
    <option value="&category=10">Entertaiment: Books</option>
    <optiseon value="&category=11">Entertaiment: Film</option>
      <option value="&category=12">Entertaiment: Music</option>
      <option value="&category=13">Entertaiment: Musicals & Theatres</option>
      <option value="&category=14">Entertaiment: Television</option>
      <option value="&category=15">Entertaiment: Video Games</option>
      <option value="&category=16">Entertaiment: Board Games</option>
      <option value="&category=17">Science & Nature</option>
      <option value="&category=18">Science: Computers</option>
      <option value="&category=19">Science: Mathematics</option>
      <option value="&category=20">Mythology</option>
      <option value="&category=21">Sports</option>
      <option value="&category=22">Geography</option>
      <option value="&category=23">History</option>
      <option value="&category=24">Politics</option>
      <option value="&category=25">Art</option>
      <option value="&category=26">Celebrities</option>
      <option value="&category=27">Animals</option>
      <option value="&category=28">Vehicles</option>
      <option value="&category=29">Entertaiment: Comics</option>
      <option value="&category=30">Science: Gadgets</option>
      <option value="&category=31">Entertaiment: Japanese Anime & Manga</option>
      <option value="&category=32">Entertaiment: Cartoon & Animations</option>
  </select>
</form>
<h5>Select Difficulty:</h5>
<form name="formul2" class="cont">
  <select id="diff" name="diff" onchange="selectDiff()">
    <option value="">Any Difficulty</option>
    <option value="&difficulty=easy">Easy</option>
    <option value="&difficulty=medium">Medium</option>
    <option value="&difficulty=hard">Hard</option>
  </select>
</form>