I need to add “value” of the “select / option” of HTML next to the url that is in the JS. Do you have an idea how to do it?

Question

Example: newurl = url + '& category = 9' + '& difficulty = hard'

The idea is to form a new url, which will be occupied in another function that calls it.

Here I need to write the example and apart I wrote a comment in Spanish and English... I hope it is understood. I only need that to finish the code.

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

If I understand you correctly, here's what you are expecting the user to do.

1. Select a category from drop down

2. Select difficulty from dropdown

3. Create a well formed URL from these values to fetch some date.

From your code it is not clear when fetch gets called.

My recommendation would be to:

1. Create one main form at the parent and include the two drop downs as child inputs.

2. Once the user selects the value on dropdown you need not do anything immediately.

3. On submit of form (you should add a submit button), call a JavaScript action.( using onsubmit event of form like this: https://www.w3schools.com/jsref/event_onsubmit.asp .

4. The first argument of this JS function is an event which will have the values of the dropdown selected by the user inside of the form node which can be accessed using form name.

5. Construct the new URL using the values and call fetch.

Answer 2

Just add an object to hold the values, update its values onchange and then join() them - and pass this newUrl to the 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>