Context: I'm trying to create a simply project (a decision tree) and I'd like to know how could I create a drop down menu so that the user can select a specific option and retrieve a output from a json file.
This is the HTML code:
decisiontree.create(
window.location.href.replace(/\/.*\.html$/, 'coronary.json'),
document.getElementById('output'),
document.getElementById('status')
);<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Decision Tree</title>
<script src="https://cdn.jsdelivr.net/npm/html-decision-tree/dist/decisiontree.js"></script>
<link rel="stylesheet" href="../styles/tree.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="content">
<header>
<h1> Knowledge-Based Decision Tree </h1>
</header>
<main class="main-content">
<div id="status">
<select id="selection">
<option value="coronary.json"> Hypertension Decision Tree </option>
<option value="diabetes.json"> Diabetes Decision Tree </option>
</select>
</div>
<div id="output"></div>
</main>
</div>
</body>
</html>As you can see, I'm only allowing the user to access the 'coronary.json' file, but I'd like to allow the user to have some flexibility and select from a range of options from a dropdown menu. How could I make it so that the user selects an option and is then passed on the window.location.href.replace... to use the information of a given file?
I believe I'd have to create some kind of querySelector to retrieve the values of each option and then pass this values onto the window.location.href, but I'm not sure how I could do that
Thank you in advance!
To listen to change events on your select element you can observe changes like so:
const selectElement = document.querySelector('#selection');
const initialValue = selectElement.value;
console.log('initial value:', initialValue);
selectElement.addEventListener('change', (event) => {
const selectedValue = event.target.value;
//your logic goes here
console.log('selection changed:', selectedValue)
});<select id="selection">
<option value="coronary.json"> Hypertension Decision Tree </option>
<option value="diabetes.json"> Diabetes Decision Tree </option>
</select>Alternatively, and this is probably the better approach, you may want to add a button with an onclick event:
function generateDecisionTree() {
const selectedValue = document.querySelector('#selection').value;
//your logic goes here
console.log("Selected value:", selectedValue)
}<select id="selection">
<option value="coronary.json"> Hypertension Decision Tree </option>
<option value="diabetes.json"> Diabetes Decision Tree </option>
</select>
<button onclick=generateDecisionTree()>Generate decision tree</button>If the library function decisiontree.create takes URLs then you can likely give it the value ./${selectedValue } (assuming you're hosting your JSON files in the same folder as your HTML file) or maybe the full URL (eg: http://localhost:8000/${selectedValue}) and the 2 DOM elements.
If it takes a JS object containing data from your JSON file then you may need to use something like the fetch API:
fetch(`./${selectedValue }`)
.then(response => response.json())
.then(data => decisiontree.create(data,
document.getElementById('output'),
document.getElementById('status')));