Javascript 我需要加上一句；“价值”；"；选择/option"；在JS中url旁边的HTML。你知道怎么做吗？

例如： newurl=url+'&类别=9'+'&难度=hard'

这个想法是形成一个新的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>   

---

如果我理解正确，下面是您希望用户做的事情

从下拉列表中选择一个类别

从下拉列表中选择难度

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

从代码中不清楚何时调用

fetch

我的建议是：

在父级创建一个主窗体，并将两个下拉列表作为子输入

一旦用户选择下拉列表中的值，您就不需要立即执行任何操作

在表单提交时（您应该添加一个提交按钮），调用一个JavaScript操作。（使用

onsubmit

表单事件，如下所示：

这个JS函数的第一个参数是一个

事件

，它将具有用户在表单节点内选择的下拉列表的值，用户可以使用表单名称访问该下拉列表

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

---

如果我理解正确，下面是您希望用户做的事情

从下拉列表中选择一个类别

从下拉列表中选择难度

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

从代码中不清楚何时调用

fetch

我的建议是：

在父级创建一个主窗体，并将两个下拉列表作为子输入

一旦用户选择下拉列表中的值，您就不需要立即执行任何操作

在表单提交时（您应该添加一个提交按钮），调用一个JavaScript操作。（使用

onsubmit

表单事件，如下所示：

这个JS函数的第一个参数是一个

事件

，它将具有用户在表单节点内选择的下拉列表的值，用户可以使用表单名称访问该下拉列表

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

---

只需添加一个对象来保存值，更新其值

onchange

，然后

join（）

它们-并将此newUrl传递给fetch函数

//var url='0https://opentdb.com/api.php?amount=20';
//选择类别
//类别=>8、9、10、11、…、32
常量对象={
网址：'https://opentdb.com/api.php?amount=20',
困难：''，
类别：“”
}
让newUrl=Object.values（obj.join）（“”）
函数selectCat（）{
var c=document.getElementById（“cat”）.value；
控制台日志（c）；
对象类别=c
newUrl=Object.values（obj.join）（“”）
//返回c；
}
//选择难度
//难度=>任意、简单、中等、困难
函数selectDiff（）{
var d=document.getElementById（“diff”）.value；
控制台日志（d）；
对象难度=d
newUrl=Object.values（obj.join）（“”）
//返回d；
}
/*羊皮价值
朱托是一个新的网址
类别和难度的嵌套值
在URL旁边获取新URL*/
//点击事件按钮
const btnFetch=document.getElementById（'fetch'）
btnFetch.addEventListener（'click'，函数（e）{
log（'将获取新URL:'，新URL）
//fetch（newUrl）.then（res=>{}）
})

获取URL


任何类别
常识
企业：书籍
企业：电影
娱乐：音乐
娱乐：音乐剧和剧院
企业：电视
娱乐：电子游戏
娱乐：棋盘游戏
科学与自然
科学：计算机
科学：数学
神话学
体育
地理
历史
政治
艺术
名人
动物
车辆
企业：漫画
科学：小玩意
展品：日本动漫
企业：卡通与动画
选择难度：
有困难吗
容易的
中等
硬的

只需添加一个对象来保存值，更新其值

onchange

，然后

join（）


//var url='0https://opentdb.com/api.php?amount=20';
//选择类别
//类别=>8、9、10、11、…、32
常量对象={
网址：'https://opentdb.com/api.php?amount=20',
困难：''，
类别：“”
}
让newUrl=Object.values（obj.join）（“”）
函数selectCat（）{
var c=document.getElementById（“cat”）.value；
控制台日志（c）；
对象类别=c
newUrl=Object.values（obj.join）（“”）
//返回c；
}
//选择难度
//难度=>任意、简单、中等、困难
函数selectDiff（）{
var d=document.getElementById（“diff”）.value；
控制台日志（d）；
对象难度=d
newUrl=Object.values（obj.join）（“”）
//返回d；
}
/*羊皮价值
朱托是一个新的网址
类别和难度的嵌套值
在URL旁边获取新URL*/
//点击事件按钮
const btnFetch=document.getElementById（'fetch'）
btnFetch.addEventListener（'click'，函数（e）{
log（'将获取新URL:'，新URL）
//fetch（newUrl）.then（res=>{}）
})
获取URL


任何类别
常识
企业：书籍
企业：电影
娱乐：音乐
娱乐：音乐剧和剧院
企业：电视
娱乐：电子游戏
娱乐：棋盘游戏
科学与自然
科学：计算机
科学：数学
神话学
    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);
  });
});