I have a series of buttons in a row that I can select individually. However, I only want to be able to choose one button at a time. Every time I deselect the previously selected button, it causes the page to reload when all I really want is for all the buttons to be deselected. Is there a way to achieve this?
https://jsfiddle.net/donfontaine12/um05k6cw/33/#&togetherjs=Hm5JqaEvUi
let rankedNo1 = document.querySelector("#ranked_no1");
let rankedNo2 = document.querySelector("#ranked_no2");
let rankedNo3 = document.querySelector("#ranked_no3");
let rankedNo4 = document.querySelector("#ranked_no4");
let rankedNo5 = document.querySelector("#ranked_no5");
let rankedNo6 = document.querySelector("#ranked_no6");
let rankedNo7 = document.querySelector("#ranked_no7");
let rankedNo8 = document.querySelector("#ranked_no8");
let rankedNo9 = document.querySelector("#ranked_no9");
let rankedNo10 = document.querySelector("#ranked_no10");
let rankedNoArray = [rankedNo1, rankedNo2, rankedNo3, rankedNo4, rankedNo5, rankedNo6, rankedNo7, rankedNo8, rankedNo9, rankedNo10];
rankedNo1.addEventListener("click", function() {
toggleHighlight(rankedNo1);
event.preventDefault();
});
rankedNo2.addEventListener("click", function() {
toggleHighlight(rankedNo2);
event.preventDefault();
});
rankedNo3.addEventListener("click", function() {
toggleHighlight(rankedNo3);
event.preventDefault();
});
rankedNo4.addEventListener("click", function() {
toggleHighlight(rankedNo4);
event.preventDefault();
});
rankedNo5.addEventListener("click", function() {
toggleHighlight(rankedNo5);
event.preventDefault();
});
rankedNo6.addEventListener("click", function() {
toggleHighlight(rankedNo6);
event.preventDefault();
});
rankedNo7.addEventListener("click", function() {
toggleHighlight(rankedNo7);
event.preventDefault();
});
rankedNo8.addEventListener("click", function() {
toggleHighlight(rankedNo8);
event.preventDefault();
});
rankedNo9.addEventListener("click", function() {
toggleHighlight(rankedNo9);
event.preventDefault();
});
rankedNo10.addEventListener("click", function() {
toggleHighlight(rankedNo10);
event.preventDefault();
});
function toggleHighlight(r) {
let highlighted = lastHighlighted();
if (highlighted) {
for (let h of highlighted) {
if (h == r) {
r.firstElementChild.classList.remove("selected");
highlighted[h.index].remove();
} else {
h.firstElementChild.classList.remove("selected");
if (r.firstElementChild.classList.contains("selected")) {
r.firstElementChild.classList.remove("selected");
} else {
r.firstElementChild.classList.add("selected");
}
}
}
} else {
if (r.firstElementChild.classList.contains("selected")) {
r.firstElementChild.classList.remove("selected");
} else {
r.firstElementChild.classList.add("selected");
}
}
}
function lastHighlighted() {
let highlightedNos = rankedNoArray.filter(x => x.firstElementChild.classList.contains("selected"));
return highlightedNos;
}#rank_flex_combo #ranked_nos,
#rank_flex_combo,
#ranked_no,
#ranked_no1,
#ranked_no2,
#ranked_no3,
#ranked_no4,
#ranked_no5,
#ranked_no6,
#ranked_no7,
#ranked_no8,
#ranked_no9,
#ranked_no10 {
display: flex;
flex-direction: row;
margin: 0em 0.5em;
}
#ranked_nos a,
#ranked_no1 a,
#ranked_no2 a,
#ranked_no3 a,
#ranked_no4 a,
#ranked_no5 a,
#ranked_no6 a,
#ranked_no7 a,
#ranked_no8 a,
#ranked_no9 a,
#ranked_no10 a {
font-weight: bold;
text-decoration: none;
padding: 0.25em 0.5em;
color: dodgerblue;
background-color: lightcyan;
border: 2px solid cyan;
border-radius: 5px;
}
#ranked_nos .selected,
#ranked_no1 .selected,
#ranked_no2 .selected,
#ranked_no3 .selected,
#ranked_no4 .selected,
#ranked_no5 .selected,
#ranked_no6 .selected,
#ranked_no7 .selected,
#ranked_no8 .selected,
#ranked_no9 .selected,
#ranked_no10 .selected {
color: mediumpurple;
background-color: lavender;
border: 2px solid mediumpurple;
}
#ranked_no a {
font-weight: bold;
text-decoration: none;
padding: 0.25em 2em;
color: dodgerblue;
background-color: white;
border: 2px solid cyan;
border-radius: 5px;
}
#ranked_no1 a:hover,
#ranked_no2 a:hover,
#ranked_no3 a:hover,
#ranked_no4 a:hover,
#ranked_no5 a:hover,
#ranked_no6 a:hover,
#ranked_no7 a:hover,
#ranked_no8 a:hover,
#ranked_no9 a:hover,
#ranked_no10 a:hover {
color: mediumpurple;
background-color: lavender;
border: 2px solid mediumpurple;
}<div id="rank_flex_combo">
<div id="ranked_no">
<a href="">Rank No.</a>
</div>
<div id="ranked_no1">
<a href="" class="selected">1</a>
</div>
<div id="ranked_no2">
<a href="">2</a>
</div>
<div id="ranked_no3">
<a href="">3</a>
</div>
<div id="ranked_no4">
<a href="">4</a>
</div>
<div id="ranked_no5">
<a href="">5</a>
</div>
<div id="ranked_no6">
<a href="">6</a>
</div>
<div id="ranked_no7">
<a href="">7</a>
</div>
<div id="ranked_no8">
<a href="">8</a>
</div>
<div id="ranked_no9">
<a href="">9</a>
</div>
<div id="ranked_no10">
<a href="">10</a>
</div>
</div>