As a preface, I am not very experienced with web development and am working on this for a university assignment.
My HTML Code
<!DOCTYPE html>c
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div id="categoriesList" class="flex-center flex-column">
<h1>Welcome to EduQuiz</h1>
<a class= "btn" data-cat="20">Mythology</a>
<a class= "btn" data-cat="23">History</a>
<a class= "btn" data-cat="9">General Knowledge</a>
<a class= "btn" data-cat="12">Music</a>
<a class= "btn" data-cat="17">Science</a>
<a class= "btn" data-cat="27">Animals</a>
<a class= "btn" data-cat="22">Geography</a>
<a class= "btn" data-cat="18">Information Technology</a>
</div>
<div id="difficulty" class="hidden flex-center flex-column">
<a class= "btn" data-difficulty="easy"> Easy</a>
<a class= "btn" data-difficulty="medium">Medium </a>
<a class= "btn" data-difficulty="hard">Hard</a>
</div>
</div>
<script src="categories.js"></script>
</body>
</html>
My JavaScript code
const category = Array.from(document.getElementsByClassName("btn"));
const allCats = document.getElementById('categoriesList');
const difficulties = document.getElementById('difficulty');
localStorage.clear();
category.forEach((cat => {
cat.addEventListener('click', (e) => {
console.log(e.target);
allCats.classList.add('hidden');
difficulties.style.left = "8rem";
difficulties.classList.remove("hidden");
if (cat.getAttribute("data-cat") != null) {
localStorage.setItem("cat", cat.getAttribute("data-cat"));
// const selectedCategory= localStorage.getItem("cat");
//console.log(selectedCategory);
}
if (cat.getAttribute("data-difficulty") != null) {
localStorage.setItem("difficulty", cat.getAttribute("data-difficulty"));
buildString();
}
});
}));
function buildString() {
const selectedCategory = localStorage.getItem("cat");
console.log(selectedCategory);
let selectedDifficulty = localStorage.getItem("difficulty");
console.log(selectedDifficulty);
let url = "https://opentdb.com/api.php?amount=10&category=";
url += selectedCategory;
url += "&difficulty=";
url += selectedDifficulty;
url += "&type=multiple";
console.log(url);
sessionStorage.setItem("diff", selectedDifficulty);
sessionStorage.setItem("url", url);
window.location = "game.html";
}
Problem:
On mobile browsers and desktop browsers the code works as intended. When a category is chosen, it hides the category buttons and shows the difficulty buttons. However, in the webview component of Android studio, when a category is chosen, nothing happens.
How should I fix this?