Get id onclick or onkeypress of div

Question

I have the following code from which I am trying to get the id of the selected bubbles either when clicked on or when selected by arrow key press. Any assistance would be most appreciated.

This is the style:

<style>  
#bubblebox{ width:650px; height:250px; margin:50px auto; border:1px solid    
#AAA; }
#bubbles{ width:auto; margin:0px auto; text-align:center; }
#bubbles > div{ display:inline-block; width:10px; height:10px; margin:24px    
10px 0px 10px; background:rgba(0,0,0,.1); text-align:center; border:2px    
solid #999; border-radius:100%; font-size:17px; text-decoration:none;   
transition: background 0.3s linear 0s; cursor:pointer; }
#bubblecontent{ margin:0px auto; transition:opacity 0.3s linear 0s; font-   
family: Arial;}
#bubblecontent > h2{ text-align:center; color:#7EA800; }
#bubblecontent > p{ font-size:17px; line-height:1.5em; padding:20px 50px;    
color:#777; }
</style>

This is the script:

<script>
// This simple function returns object reference for elements by ID
function _(x){return document.getElementById(x);}
// Variables for bubble array, bubble index, and the setInterval() variable
var ba, bi=0, intrvl;
// bca - Bubble Content Array. Put your content here.
var bca = [
'<h2>Heading Number 1</h2><p>Content for section 1</p>',
'<h2>Heading Number 2</h2><p>Content for section 2</p>',
'<h2>Heading Number 3</h2><p>Content for section 3</p>',
'<h2>Heading Number 4</h2><p>Content for section 4</p>'
];
// This function is triggered by the bubbleSlide() function below
function bubbles(bi){
// Fade-out the content
_("bubblecontent").style.opacity = 0;
// Loop over the bubbles and change all of their background color
for(var i=0; i < ba.length; i++){
    ba[i].style.background = "rgba(0,0,0,.1)";
}
// Change the target bubble background to be darker than the rest
ba[bi].style.background = "#999";
// Stall the bubble and content changing for just 300ms
setTimeout(function(){
    // Change the content
    _("bubblecontent").innerHTML = bca[bi];
    // Fade-in the content
    _("bubblecontent").style.opacity = 1;
}, 300);
}
// This function is set to run every 5 seconds(5000ms)
function bubbleSlide(){
bi++; // Increment the bubble index number
// If bubble index number is equal to the amount of total bubbles
if(bi == ba.length){
    bi = 0; // Reset the bubble index to 0 so it loops back at the beginning
}
// Make the bubbles() function above run
bubbles(bi);
}
// Start the application up when document is ready
window.addEventListener("load", function(){
// Get the bubbles array
ba = _("bubbles").children;
// Set the interval timing for the slideshow speed
intrvl = setInterval(bubbleSlide, 5000);
});
</script>

Here is the div part

<div id="bubblebox">
<div id="bubbles">
<div onclick="bubbles(0); clearInterval(intrvl);" style="background:#999;">    
</div>
<div id=1 onclick="bubbles(1); clearInterval(intrvl);"></div>
<div id=2 onclick="bubbles(2); clearInterval(intrvl);"></div>
<div id=3 onclick="bubbles(3); clearInterval(intrvl);"></div>
</div>
<div id="bubblecontent">
<h2>Heading Number 1</h2>
<p>Content for section 1</p>
</div>
</div>

Answer 1

Add this to your script:

function bubbleClick(bubble) {
    console.log("bubble " + bubble + " clicked");
}

and make this change in your html:

<div onclick="bubbles(0); clearInterval(intrvl); bubbleClick(0);" style="background:#999;">    
</div>
<div id=1 onclick="bubbles(1); clearInterval(intrvl); bubbleClick(1);"></div>
<div id=2 onclick="bubbles(2); clearInterval(intrvl); bubbleClick(2);"></div>
<div id=3 onclick="bubbles(3); clearInterval(intrvl); bubbleClick(3);"></div>

That takes care of the clicks. Can you describe the exact keyboard behavior you're trying to implement?