have a script which makes divs in a fore-loop and appends a sentence from a database to it. Now I want to make a link out of the sentence, I do get the styling of a link (blue underlined) but on click nothing happens.
here is my part of my code:
E D I T E D
<html>
<style>
html,body {
width:100%;
height:100%;
margin:0;
font-family: "Nitti Grotesk",Helvetica,Arial,sans-serif;
}
.random {
position:absolute;
padding:10px;
font-size:10pt;
display:inline-block;
}
p{display: inline;}
</style>
<body>
<div class="allescheissehierrein">
</div>
</body>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
//einfach loop mit bis 100 oder was auch immer
for(i=1; i<=10; i++){
console.log('test');
//einen div in eine variable speichern
//es wird für die datenbank "data-hover" auf den i wert gesetzt welcher ja stetig hochzählt darum alle verschieden
if (i<24){
var div = '<div data-hover="'+i+'" class="random">#</div>';
} else if ((i>23) && (i<47)){
var div = '<div data-hover="'+i+'" class="random">**</div>';
} else if ((i>46) && (i<97)){
var div = '<div data-hover="'+i+'" class="random">-</div>';
} else if ((i>96) && (i<114)){
var div = '<div data-hover="'+i+'" class="random">1.</div>';
} else if (i>113){
var div = '<div data-hover="'+i+'" class="random">~~</div>';
}
//diesen die dem allescheissehierrein-div appendieren (100 mal)
$('.allescheissehierrein').append(div);
}
//diese platzier dings funktionion erst nach der platzierung aller divs (diese 100) machen weil sie ja vorher gar nicht existieren
platzierRandom();
//richtig mit jquery UND datenbank
$('.random').mouseover(function(){
var hoverdata = $(this).data('hover');
var satzvondatenbank = datenbank[hoverdata];
console.log('hoverdata', hoverdata);
console.log('satzvondatenbank', satzvondatenbank);
$( this ).append( $( "<span>"+satzvondatenbank+"</span>" ).show('slow'));
}).mouseout(function(){
$( this ).find( "span:last" ).remove();
});
});
var datenbank = {
1: '<a href="www.google.com">So,</a>',
2: 'so',
3: 'you',
4: 'think',
5: 'you',
6: 'can',
8: 'tell',
9: 'Heaven',
10: 'from',
11: 'Hell',
12: 'blue',
13: 'Skies',
14: 'from',
15: 'Pain',
16: 'Can,',
17: 'you',
18: 'tell',
19: 'a green',
20: 'field',
21: 'from',
22: 'a',
23: 'cold',
24: 'steel',
25: 'rail?',
26: 'A',
27: 'Smile',
28: 'from',
29: 'a',
30: 'veil?',
31: 'Do',
32: 'you',
33: 'think',
34: 'you',
35: 'can',
36: 'tell?',
37: 'And',
38: 'did',
39: 'they',
40: 'get',
41: 'you',
42: 'trade',
43: 'your',
44: 'heroes,',
45: 'for',
46: 'ghosts?',
47: 'Hot',
48: 'ashes',
49: 'for',
50: 'trees?',
51: 'Hot',
52: 'air',
53: 'for',
54: 'a',
55: 'cool',
56: 'breeze?',
57: 'Cold',
58: 'comfort',
59: 'for',
60: 'change?',
61: 'And',
62: 'did',
63: 'you',
64: 'exchange',
65: 'A',
66: 'walk',
67: 'on',
68: 'part',
69: 'in',
70: 'the',
71: 'war',
72: 'for',
73: 'a',
74: 'leading',
75: 'role',
76: 'in',
77: 'a',
78: 'cage?',
79: 'How',
80: 'I',
81: 'wish',
82: 'how',
83: 'I',
84: 'wish',
85: 'you',
86: 'were',
87: 'here',
88: 'We re ',
89: 'just',
90: 'two',
91: 'lost',
92: 'souls',
93: 'swimming',
94: 'in',
95: 'a',
96: 'fish',
97: 'bowl',
98: 'Year',
99: 'after',
100: 'Year',
101: 'Running',
102: 'over',
103: 'the',
104: 'same',
105: 'old',
106: 'ground',
107: 'What',
108: 'have',
109: 'we',
110: 'found?',
111: 'the',
112: 'same',
113: 'old',
114: 'fears',
115: 'Wish',
116: 'you',
117: 'were',
118: 'here'
};
function platzierRandom(){
w=document.body.offsetWidth;
h=document.body.offsetHeight;
rd=document.getElementsByTagName('div');
for(c=0;c<rd.length;c++) {
if(rd[c].className=='random') {
xCoord=Math.floor(Math.random()*w);
yCoord=Math.floor(Math.random()*h);
if(xCoord>=w-rd[c].offsetWidth-10){
xCoord=w-rd[c].offsetWidth-10;
}
if(xCoord<=10){
xCoord=10;
}
if(yCoord>=h-rd[c].offsetHeight-10){
yCoord=h-rd[c].offsetHeight-10;
}
if(yCoord<=10){
yCoord=10;
}
rd[c].style.left=xCoord+'px';
rd[c].style.top=yCoord+'px';
}
}
}
</script>
</html>
