I have the following html with three identical ellipses. The file style.css defines the styles unselected-key and selected-key. Using pure JavaScript/CSS I want to achieve that when an ellipse is clicked its style changes from unselected-key to selected-key and every other ellipse gets the style unselected-key. The solution should adapt easily to the case of a large number of ellipses in the svg image.
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Major keys</h1>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<g id="g-14" class="unselected-key">
<ellipse cx="346.176" cy="15.569" rx="22.2" ry="22.2" />
<text x="346.176" y="15.569">1</text>
</g>
<g id="g-15" class="unselected-key">
<ellipse cx="451.176" cy="43.704" rx="22.2" ry="22.2" />
<text x="451.176" y="43.704">2</text>
</g>
<g id="g-16" class="unselected-key">
<ellipse cx="528.041" cy="120.569" rx="22.2" ry="22.2" />
<text x="528.041" y="120.569">3</text>
</g>
</svg>
</body>
</html>
Without any joke: As you called this "Experiment" I did an experiment myself. I put your HTML in VSCode and asked the Github Copilot to do the following:
// add a listener to the svg ellipses so when an ellipse is clicked, the class of the ellipse is changed to selected-key and all other ellipses are changed to unselected-key. If the ellipse is already selected, the class is not changed to unselected-key.
It did spit out this:
var svg = document.querySelector('svg');
svg.addEventListener('click', function(e) {
if (e.target.tagName === 'ellipse') {
var selectedKey = e.target.parentNode;
var unselectedKeys = document.querySelectorAll('g:not(#' + selectedKey.id + ')');
for (var i = 0; i < unselectedKeys.length; i++) {
unselectedKeys[i].classList.remove('selected-key');
unselectedKeys[i].classList.add('unselected-key');
}
selectedKey.classList.remove('unselected-key');
selectedKey.classList.add('selected-key');
}
});
What should I say? For me it works. I'm probably roasted for this, but I found it funny enough to still post it.