Adobe DTM: Get The Text Value of a Parent DIV



I'm a bit new to both DTM and Javascript, so please forgive me if this is obvious.

I've set an event rule to fire on a "Buy Now" click that is triggered by a CSS selector (class="buybtn") of which there are several iterations.

I'm trying to pass the value of text from another DIV (class="titletxt") that is not being clicked on, but is within the same family of DIVs for each iteration, into an eVar. I have the following onPage code(multiplied several times because each product is coded the same way[I didn't code it]):

<div class="infobox"> 
<div class="titletxt">1. Product</div>
<div class="artisttxt">Artist</div>
<div class="buybtn">BUY NOW</div>
<div class="infotxt">

I've also created a data element called 'song' with custom code as follows.

document.getElementsByClassName("buybtn").onclick = function() { mySong() }; 
function mySong() { document.getElementsByClassName("buybtn").innerHTML =
.getElementsByClassName("titletxt")[0].textContent; }

In my event rule I've inserted %song% value in the proper eVar. But when I click on any of the events I either get nothing in return or the actual JS code. If you know what's happening here please help, cause I'm totally lost.