SHOW:
|
|
- or go back to the newest paste.
1 | var custComments = [ | |
2 | ["Comment 1", "User 1"], | |
3 | ["Comment 2", "User 2"], | |
4 | ["Comment 3", "User 3"], | |
5 | ["Comment 4", "User 4"] | |
6 | ]; | |
7 | ||
8 | var custMsg = document.getElementById("custtest"); // This grabs the element that this code will append the HTML to | |
9 | var baseMessage = custMsg.children[0].cloneNode(true); | |
10 | var baseName = custMsg.children[1].cloneNode(true); | |
11 | var indexNum = 0; // Pulls the current Index of the 2D array custComments | |
12 | var delay = 3000; // Delay in milliseconds (1000ms per second) | |
13 | - | custMsg.innerHTML = '<p class="custmsg">' + comments[indexNum][0] + '</p><br>' + '<p class="person">' + comments[indexNum][1] + '</p>'; // Ugly but works for now, this will combine the comment and user portions of the array into an HTML element that I can proceed to change the display with CSS |
13 | + | |
14 | function createSafeElement(baseElement, input) { | |
15 | // Create a copy of the node, so that our base remains clean. | |
16 | var res = baseElement.cloneNode(true); | |
17 | res.appendChild(document.createTextNode(input)); | |
18 | return res; | |
19 | } | |
20 | ||
21 | function replaceMsg ( comments ) { | |
22 | // Because these are customer messages, they are not trustworthy input. They could contain javascript XSS attacks or similar, so we need to escape them. | |
23 | var newMessage = document.createElement('div'); // or 'p' or whatever your "custtest" element actually is | |
24 | newMessage.appendChild(createSafeElement(baseMessage, custComments[indexNum][0])); | |
25 | newMessage.appendChild(createSafeElement(baseName, custComments[indexNum][1])); | |
26 | custMsg = newMessage; | |
27 | indexNum += 1; // This part increase the index of the array | |
28 | if (indexNum == custComments.length) { | |
29 | indexNum = 0; | |
30 | } // This if statement will reset the indexNum if it reaches the end of the array | |
31 | } | |
32 | ||
33 | // setInterval(replaceMsg(custComments),delay); This was actually incorrect | |
34 | setInterval(function(){replaceMsg(custComments)},delay); // This is the correct syntax |