CODEWITHSUNDEEP
javascriptjqueryhtml
Brian Morton
Brian Morton

Reputation: 97

Adding Sentences From Paragraph Array With Uniqqe Id's

I am writing a script that takes a book as some array of sentences. I want to print each sentence out, then make each sentence clickable. Right now, I have it printing each sentence, but when I attempt to append a

element with it's own unique id for each sentence, it does not work. here is my jsfidde: http://jsfiddle.net/mvvq8L7p/

Relevant code snippet.

var IdCounter = 0;
for (var i = 0, len = book_sentences.length; i < len; i++) {
   IdCounter++;
   document.getElementById("pageOfBook").innerHTML = "<p class='sentence' id='sentence#" + IdCounter + "'>" + book_sentences[i] + "</p>";
}

Can anyone explain why this occurs and how to make it work? Thanks in advance, I really appreciate the help!

Upvotes: 0

Views: 52

Answers (1)

Mox Shah
Mox Shah

Reputation: 3015

Simply just split your paragraph with '.', and append it to your div with IDCounter/

    var book = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
var book_sentences = book.split('.');
IdCounter = 0;

book_sentences.forEach(function(data){
IdCounter = IdCounter + 1;
    console.log(data);
document.getElementById("pageOfBook").innerHTML += "<p class='sentence' id='sentence#" + IdCounter + "'>" + data + ".</p>";
});
<div id="pageOfBook"></div>

Upvotes: 2

Related Questions