Currently, I have a script that adds a word to a div on mouse-over. Now, my goal is to have the word remembered and printed in the console when clicking on it. However, the words are links formatted like this:
<a href"">So,</a>
When clicked, the script currently remembers the entire link. Therefore, I need to figure out a way to extract just the word "So". Any suggestions? Here's the code snippet:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
var $allescheissehierrein = $('.allescheissehierrein'),
database = {
1: '<a href="file:///Users/shirin/Desktop/A/Media%20Design/TCB/one.html">So,</a>',
2: '<a href="file:///Users/shirin/Desktop/A/Media%20Design/TCB/one.html">HERE,</a>'},
symbol = '',
placeRandomly = function () {
var w = document.body.offsetWidth,
h = document.body.offsetHeight,
rd = document.getElementsByTagName('div');
for (var c = 0, l = rd.length; c < l; c++) {
if (rd[c].className !== 'random') {
continue;
}
var xCoord = Math.floor(Math.random() * w),
yCoord = Math.floor(Math.random() * h);
switch (true) {
case (xCoord >= w - rd[c].offsetWidth - 10):
xCoord = w - rd[c].offsetWidth - 10;
break;
case (xCoord <= 10):
xCoord = 10;
break;
case (yCoord >= h - rd[c].offsetHeight - 10):
yCoord = h - rd[c].offsetHeight - 10;
break;
case (yCoord <= 10):
yCoord = 10;
break;
}
rd[c].style.left = xCoord + 'px';
rd[c].style.top = yCoord + 'px';
}
};
//loop through 100 times or however many needed
for (var i = 1; i <= 2; i++) {
//save a div in a variable
//set "data-hover" attribute based on the incremented value which will be different each time
switch (true) {
case (i < 24):
symbol = '#';
break;
case ((i > 23) && (i < 47)):
symbol = '**';
break;
case ((i > 46) && (i < 97)):
symbol = '-';
break;
case ((i > 96) && (i < 114)):
symbol = '1.';
break;
case (i > 113):
symbol = '~~';
break;
}
//append this to the allescheissehierrein-div (100 times)
$allescheissehierrein.append('<div data-hover="' + i + '" class="random"><p>' + symbol + '</p></div>');
}
//run placeRandom function only after placing all 100 divs because they do not exist before that
placeRandomly();
//implementation with jQuery AND database
$('.random')
.hover(function () {
var hoverData = $(this).data('hover'),
dataFromDatabase = database[hoverData];
$(this).append($('<span>' + dataFromDatabase + '</span>').show('slow'));
$( 'a' ).mousedown( function( event )
{
var poemArray;
if ( localStorage.getItem( "poem" ) )
{
poemArray = localStorage.getItem( "poem" );
console.log( poemArray );
}
else
{
poemArray = "";
localStorage.setItem( "poem", poemArray );
}
poemArray += " " + dataFromDatabase;
console.log( poemArray );
localStorage.setItem( "poem", poemArray );
}
)
}, function () {
$(this).find('span:last').remove();
});
</script>
</html>