我需要在 JS 中的 url 旁边添加 HTML 的“选择/选项”的“值”。 你知道怎么做吗？

Question

示例：newurl = url + '& category = 9' + '&难度 = hard'

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

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

索引.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>   

游戏.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

如果我对您的理解正确，这就是您期望用户执行的操作。

1. Select 一个类别从下拉

2. Select 下拉难度

3. 从这些值创建一个格式良好的 URL 以获取一些日期。

从您的代码中不清楚何时调用fetch 。

我的建议是：

1. 在父表单中创建一个主表单，并将两个下拉列表作为子输入。

2. 一旦用户选择下拉列表中的值，您无需立即执行任何操作。

3. 在提交表单时（您应该添加提交按钮），调用 JavaScript 操作。（使用如下表单的onsubmit事件： https://www.w3schools.com/jsref/event_onsubmit.asp 。

4. 这个 JS function 的第一个参数是一个event ，它具有用户在表单节点内选择的下拉列表的值，可以使用表单名称访问。

5. 使用这些值构造新的 URL 并调用 fetch。

Answer 2

只需添加一个 object 来保存值，更新其值onchange然后join()它们 - 并将这个newUrl传递给 fetch function。

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