retrieve data based on dropdown selection

Question

I'm working on a trivia app that generates questions from an API. I want the questions generated to be for the category/ difficulty selected once the get question button is clicked. Right now it's generating random questions on the console when the page loads. I'm unclear where I'm going wrong?

So far my code is like:

const score = document.querySelector('#score');
const output = document.querySelector('#output');
const answerSelect = document.querySelector('#selAnswers');
const btn = document.querySelector('#btn');

const categories = [ 
  'Sports',
  'Art',
  'Vehicles',
  'History'
];

const difficulty = [ 
  'easy',
  'medium',
  'hard'
];

btn.addEventListener('submit', function(e) {
        e.preventDefault();

});

document.addEventListener('DOMContentLoaded', function() {
  
  let categorySelect = document.querySelector('#category');
  let difficultySelect = document.querySelector('#difficulty');

  let html = '';
  for (let item of categories) {
    // Appending Strings created using Template literals
    html += `<option>${item}</option>`;
  }
  categorySelect.innerHTML = html;
  
  for (let item of difficulty) {
    let opt = document.createElement('option');
    
    // <option> will use its .textContent as value if not explicitly defined
    opt.textContent = item;
    
    difficultySelect.append(opt);
  }
});

  $.ajax ({
    url: 'https://opentdb.com/api.php?amount=10', 
    data: '{}',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data.results[0]);
        
        
        data.items.forEach(function(item){


            //console.log(item);

            let output = getOutput(item);
            //Display Results

            result.innerHTML += output;
        });

    },
    error: function(jqXHR, textStatus, ex ){
        console.log(`${textStatus}, ${ex}, ${jqXHR.responseText}`);
        alert(`${textStatus}, ${ex} ${jqXHR.responseText}`);
        }
    
    
   });


//function

function getQuestion(){
    
    result.innerHTML ='';
    btn.innerHTML ='';

    let categoryOption = categories.value;
    let difficultyLevel = difficulty.value;
}

HTML:

<!doctype html>
<html lang="en">
<head>
    <title>Trivia</title>
    <link rel='stylesheet' href='css/Trivia.css' >
</head>
<body>
    <h1>Trivia</h1>
    <div>Score: <span id='score'>Correct 0 Wrong 0</span></div>
    <br>
    <div> 
        <label>Select Category:</label>
        <select id='category'></select>
        <br> 
        <label>Select Difficulty:</label>
        <select id='difficulty'></select>
    </div>
    <br><br>
    <div id='output'></div>
    <br>
    <div id='selAnswers'></div>
    <br>
    <button id='btn' type='submit'>Get First Question!</button>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src ='js/Trivia.js'></script>
</body>
</html>

Answer 1

According to the docs, you should add the parameters category , difficulty , and type to your GET request, specifying the values selected from your select lists. You don't seem to add those parameters to your ajax call.

In addition to this, the "category" parameter cannot be passed as a textual category (which looks what you are trying to do), but a number indexed categories list. Straight from the API help page, something like this:

<option value="9">General Knowledge</option>
<option value="10">Entertainment: Books</option>
<option value="11">Entertainment: Film</option>
<option value="12">Entertainment: Music</option>
<option value="13">Entertainment: Musicals &amp; Theatres</option>
<option value="14">Entertainment: Television</option>
<option value="15">Entertainment: Video Games</option>
<option value="16">Entertainment: Board Games</option>
<option value="17">Science &amp; Nature</option>
<option value="18">Science: Computers</option>
<option value="19">Science: Mathematics</option>
<option value="20">Mythology</option>...

It looks very easy to implement. Your code is just making the base call, without any parameters. Just add them to the query string and you should be fine.

retrieve data based on dropdown selection

Question

1 answers

solution1
0 2021-01-09 06:54:17

retrieve data based on dropdown selection

Question

1 answers

solution1 0 2021-01-09 06:54:17

solution1
0 2021-01-09 06:54:17