Maintain an array and iterate over it.
It all depends on how you structure your data.
Combine all your medications in one object and maintain a state for all buttons
const medication = {
a: [
{
name: "A WOMAN'S FORMULA",
link: "#",
},
{
name: "A. C. and C. 8 - 325+8+15mg",
link: "#"
}
],
b: [
{
name: "B +C 600 Stress tablet",
link: "#",
},
{
name: "B 100 Complex la-tablet",
link: "#"
}
]};
let activeButton = {
a: false,
b: false,
}
let items = []
function handleClick(btnId) {
if (!activeButton[btnId]) {
items = [ ...items, ...medication[btnId] ]
} else {
items = items.filter(item => !medication[btnId].includes(item))
}
activeButton[btnId] = !activeButton[btnId]
renderItems()
}
function renderItems() {
const app = document.getElementById('app')
app.innerHTML = items.map(item => `<a href="${item.link}">${item.name}</a>`).join('<br>')
}
renderItems()
<button id="a-btn" onclick="handleClick('a')">a button</button>
<button id="b-btn" onclick="handleClick('b')">b button</button>
<div id="app"></div>
I am wondering how can one be able to generate different text which are links that are inside a menu that displays it when clicking on different buttons?
For example, when clicking on button A, this will generate a menu with text inside that displays all words that start with the letter A. When clicking on button B, it will generate a menu with text inside that displays all words starting with the letter B.
So far here is what I have:
This is the medicationCompendium.js file
const medicationA = [
{
name: "A WOMAN'S FORMULA",
link: "#",
},
{
name: "A. C. and C. 8 - 325+8+15mg",
link: "#"
}
];
const medicationB = [
{
name: "B +C 600 Stress tablet",
link: "#",
},
{
name: "B 100 Complex la-tablet",
link: "#"
}
];
function openNav() {
document.getElementById("myNav1").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav1").style.width = "0%";
}
function medicationTemplate(medication){
return `
<a href="${medication.link}">
${medication.name}
</a>
`
}
When using the openNav() function this creates an overlay menu which will house the objects from medicationA, medicationB and so on.
So far I am only able to display either the objects from medicationA or medicationB but not both when clicking on them as stated in the example above.
Here are the rest of my files:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ==================== CSS INTERNAL =============================== -->
<!-- General Style Sheet -->
<link rel="stylesheet" type="text/css" href="./css/gs.css">
<!-- BUTTONS STYLE -->
<link rel="stylesheet" type="text/css" href="./css/buttons.css">
<!-- OVERLAY MENU STYLE -->
<link rel="stylesheet" type="text/css" href="./css/overlayMenu.css">
<!-- ==================== JAVASCRIPT INTERNAL =============================== -->
<script type="text/javascript" src="./js/medicationCompendium.js"></script>
<script type="text/javascript" src="./js/alphabet.js"></script>
<title>Pharmacy Compendium</title>
</head>
<body>
<div id="app">
<script>
document.getElementById('app').innerHTML =
`
<div id="myNav1" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
${medicationTemplate()}
</div>
<div class="buttonsSection">
${alphabet.map(letterTemplate).join(" ")}
</div>
`
</script>
</div>
</body>
</html>
and finally:
alphabet.js
const alphabet = [
{
letter: "A",
number: 0
},
{
letter: "B",
},
{
letter: "C",
},
{
letter: "D",
},
{
letter: "E",
},
{
letter: "F",
},
{
letter: "G",
},
{
letter: "H",
},
{
letter: "I",
},
{
letter: "J",
},
{
letter: "K",
},
{
letter: "L",
},
{
letter: "M",
},
{
letter: "N",
},
{
letter: "O",
},
{
letter: "P",
},
{
letter: "Q",
},
{
letter: "R",
},
{
letter: "S",
},
{
letter: "T",
},
{
letter: "U",
},
{
letter: "V",
},
{
letter: "W",
},
{
letter: "X",
},
{
letter: "Y",
},
{
letter: "Z",
},
];
function letterTemplate(letters){
return `
<button class="button alphabet-button" onclick="openNav()">
${letters.letter}
</button>
`
}
Thank you for the fix. It does exactly what I intended but how would I proceed to have this inside of an overlay? Heres an example :
Perfect it now works with your sugested fix. I changed the querying and I am now able to get an overlay with the correct names inside that overlay. Although I had to modify your code a bit and ended up making separate functions, one that opens the overlay and generates the alpahbetical names and a function that closes the menu and erases the names once the user is done. I’ll post the two functions below. Again thank your for your fix.
