当已选择数组中的DOM元素时，如何阻止javascript函数运行？

Question

I have a script that makes gives me a dynamic header depending on which bubble in an array is currently selected. However, when a bubble is already selected and the user clicks on that same bubble, I can't stop the js function from running and it changes the opacity of the header to 0 temporarily. In this case I'd like for the opacity of the header to remain as 1. This seems rather simple but I can't figure it out. The code on CodePen.

HTML:

<div id="bubbles">
<div onclick="bubbles(0); clearInterval(intrvl);" style="background:#da2225;"></div>
<div onclick="bubbles(1); clearInterval(intrvl);"></div>
<div onclick="bubbles(2); clearInterval(intrvl);"></div>
</div>
<div id="bubblecontent">
<h2>Header 1</h2>
</div>

Javascript:

function _(x){return document.getElementById(x);}

var ba, bi=0, intrvl;
var bca = [
'<h2>Header 1</h2>',
  '<h2>Header 2</h2>',
  '<h2>Header 3</h2>',
];

function bubbles(bi){
_("bubblecontent").style.opacity = 0;
for(var i=0; i < ba.length; i++){
    ba[i].style.background = "#ccc";
}
ba[bi].style.background = "#da2225";
setTimeout(function(){
    _("bubblecontent").innerHTML = bca[bi];
    _("bubblecontent").style.opacity = 1;
}, 300);
}

window.addEventListener("load", function(){
ba = _("bubbles").children;
});

Answer 1

In function bubbles, add conditional if the bi is the same as previous one:

var prev = -1;

function bubbles(bi){
   if (bi != prev){
//           put the rest of your bubbles(bi) code put here
   }
   prev = bi;
}

Answer 2

You can use HTMLElement.dataset to store variable of active element, set first <div> child of #bubbles element to "true" , at click event of div element set all #bubbles div children ba dataset.active to "false" , set current element ba[bi] .dataset.active to "true"

 function _(x) { return document.getElementById(x); } var ba, bi = 0, intrvl; var bca = [ '<h2>Header 1</h2>', '<h2>Header 2</h2>', '<h2>Header 3</h2>', ]; function bubbles(bi) { if (ba[bi].dataset.active !== "true") { _("bubblecontent").style.opacity = 0; for (var i = 0; i < ba.length; i++) { ba[i].style.background = "#ccc"; ba[i].dataset.active = "false"; } ba[bi].dataset.active = true; ba[bi].style.background = "#da2225"; setTimeout(function() { _("bubblecontent").innerHTML = bca[bi]; _("bubblecontent").style.opacity = 1; }, 300); } } window.addEventListener("load", function() { ba = _("bubbles").children; }); 

 #bubbles { text-align: center; } #bubbles > div { display: inline-block; width: 15px; height: 15px; margin: 24px 10px 0px 10px; background-color: #ccc; border-radius: 100%; transition: background 0.3s linear 0s; cursor: pointer; } #bubblecontent { transition: opacity 0.3s linear 0s; } #bubblecontent h2 { text-align: center; color: #333; } 

 <div id="bubbles"> <div data-active="true" onclick="bubbles(0); clearInterval(intrvl);" style="background:#da2225;"></div> <div onclick="bubbles(1); clearInterval(intrvl);"></div> <div onclick="bubbles(2); clearInterval(intrvl);"></div> </div> <div id="bubblecontent"> <h2>Header 1</h2> </div>