How do I make linebreaks for innerhtml content in a p tag using javascript
Question
Basically I'm making a simple application in javascript that allows you to write in a weekday and then get the school classes that you have for that day. It works fine and outputs the text in the p tag when I enter the day. That's not my problem.
I'd like to know how I make the output (the classes) go in a list format sort of. Like it doesnt go next to eachother on one line. Instead it goes line by line with linebreaks basically. How do I make that happen?
<body> <p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p> <script type="text/javascript"> document.getElementById("print").onclick = function() { var måndagLektioner = "Engelska " + "Bild " + "Språk " + "Slöjd " + "Svenska"; var tisdagLektioner = "So " + "Språk " + "No" + " Matte" + " Musik " + "Svenska"; var onsdagLektioner = "Matte " + "So" + " Idrott" + " Engelska" + " No" + " Elevens val"; var torsdagLektioner = "No " + "Hemkunskap " + "So " + "Samling " + "No " + "Språk" var fredagLektioner = "Svenska " + "Matte " + "Idrott " + "So"; if (document.getElementById("dag").value == "måndag") { document.getElementById("lektioner").innerHTML = måndagLektioner; } if (document.getElementById("dag").value == "tisdag") { document.getElementById("lektioner").innerHTML = tisdagLektioner; } if (document.getElementById("dag").value == "onsdag") { document.getElementById("lektioner").innerHTML = onsdagLektioner; } if (document.getElementById("dag").value == "torsdag") { document.getElementById("lektioner").innerHTML = torsdagLektioner; } if (document.getElementById("dag").value == "fredag") { document.getElementById("lektioner").innerHTML = fredagLektioner; } } </script> </body>
3 answers
solution1
2 ACCPTED 2015-03-29 10:23:50
Solution 1: Use .split(' ').join('<br />'); after variables to replace (space) with <br /> (new line). This way you will have every word on a new line.
document.getElementById("print").onclick = function() { var måndagLektioner = "Engelska " + "Bild " + "Språk " + "Slöjd " + "Svenska"; if (document.getElementById("dag").value=="måndag") { document.getElementById("lektioner").innerHTML = måndagLektioner.split(' ').join('<br />'); } }
<p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p>
Solution 2: Also, you can add a special character to make a difference between multiple words on same line, let's say we use | to separate them. You will do .split('|').join('<br />'); like below.
document.getElementById("print").onclick = function() { var måndagLektioner = "Engelska|" + "Bild " + "Språk|" + "Slöjd|" + "Svenska"; if (document.getElementById("dag").value=="måndag") { document.getElementById("lektioner").innerHTML = måndagLektioner.split('|').join('<br />'); } }
<p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p>
Solution 3 : If you want to use other tags then <br /> you can do some functions that will surround your words by a tag. The example below is for an unordered list ul and with li childs.
function insertTag(word, tag) { var result = '<' + tag + '>' + word + '</' + tag + '>'; return result; } function insertListTag(list, tag, innerTag) { var result = '<'+tag+'>'; for(var word in list) { result += insertTag(list[word], innerTag); } result += '</'+tag+'>'; return result; } document.getElementById("print").onclick = function() { var måndagLektioner = "Engelska|" + "Bild " + "Språk|" + "Slöjd|" + "Svenska"; if (document.getElementById("dag").value=="måndag") { document.getElementById("lektioner").innerHTML = insertListTag(måndagLektioner.split('|'), 'ul', 'li'); } }
<p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p>
solution2
0 2015-03-29 10:46:21
While the other answer probably works well, I'm going to present a more correct way of doing what you mean.
You have a list of classes, a list is represented in JavaScript in the form of an array.
var måndagLektioner = ["Engelska", "Bild", "Språk", "Slöjd", "Svenska"];
Then you can do things on that array (loop over it, join it into a string, etc).
You want a list representation on your document as well, for that we have 3 elements. The <ul> (unordered list) and <ol> (ordered list) as the parent, and <li> for each list item.
So let's loop over the array, create an <li> element for each item, and add that to the list
// Save all of your elements in variables, don't call getElementById
// more than once for the same element.
var print = document.getElementById("print");
var dag = document.getElementById("dag");
var lektioner = document.getElementById("lektioner");
// Use addEventListener, not onclick.
// This way you can have multiple event handlers on the same element.
print.addEventListener('click', function () {
// Let's create an object. We can access a specific lesson array with
// lessons["tisdagLektioner"] (for example)
var lessons = {
"måndagLektioner": ["Engelska", "Bild", "Språk", "Slöjd", "Svenska"],
"tisdagLektioner": ["So", "Språk", "No" + " Matte" + " Musik", "Svenska"],
"onsdagLektioner": ["Matte", "So", "Idrott", "Engelska", "No", "Elevens val"],
"torsdagLektioner": ["No", "Hemkunskap", "So", "Samling", "No", "Språk"],
"fredagLektioner": ["Svenska", "Matte", "Idrott", "So"]
}
// There are better ways to clear an element. But let's stick with the basics.
lektioner.innerHTML = '';
// if you wrote an entry in dag that's in our object
if (lessons[dag.value]) {
// Iterate that array.
lessons[dag.value].forEach(function(lesson) {
// Inside this function, item in the array is called "lesson".
// Create an LI
var li = document.createElement('li');
// Make the text equal to the current lesson
li.textContent = lesson;
// Append to the UL.
lektioner.appendChild(li);
});
}
});
You can have a look here
solution3
0 2015-03-29 11:13:31
I'd suggest amending your JavaScript somewhat, to the following approach:
document.getElementById("print").onclick = function() {
// create an object containing all the days' lessons:
var dagar = {
måndagLektioner: "Engelska " + "Bild " + "Språk " + "Slöjd " + "Svenska",
tisdagLektioner: "So " + "Språk " + "No" + " Matte" + " Musik " + "Svenska",
onsdagLektioner: "Matte " + "So" + " Idrott" + " Engelska" + " No" + " Elevens val",
torsdagLektioner: "No " + "Hemkunskap " + "So " + "Samling " + "No " + "Språk",
fredagLektioner: "Svenska " + "Matte " + "Idrott " + "So"
},
// get the value once, not repeatedly, using trim()
// to remove leading, and trailing white-space,
// convert to lower case to account for capitalisation
// differences:
value = document.getElementById('dag').value.trim().toLowerCase();
// set the elements innerHTML to the value returned from the
// created object, replacing the found white-space sequences
// with <br />:
document.getElementById('lektioner').innerHTML = dagar[ value + 'Lektioner'].replace(/\s+/g,'<br />');
}
document.getElementById("print").onclick = function() { var dagar = { måndagLektioner: "Engelska " + "Bild " + "Språk " + "Slöjd " + "Svenska", tisdagLektioner: "So " + "Språk " + "No" + " Matte" + " Musik " + "Svenska", onsdagLektioner: "Matte " + "So" + " Idrott" + " Engelska" + " No" + " Elevens val", torsdagLektioner: "No " + "Hemkunskap " + "So " + "Samling " + "No " + "Språk", fredagLektioner: "Svenska " + "Matte " + "Idrott " + "So" }, value = document.getElementById('dag').value.trim().toLowerCase(); document.getElementById('lektioner').innerHTML = dagar[ value + 'Lektioner'].replace(/\\s+/g,'<br />'); }
<p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p>
Further, though, I'd suggest using arrays within the object, which allows lesson-names to contain white-spaces ( "Elevens val" , for instance):
document.getElementById("print").onclick = function() {
var dagar = {
måndagLektioner: ["Engelska", "Bild", "Språk", "Slöjd", "Svenska"],
tisdagLektioner: ["So", "Språk", "No","Matte", "Musik", "Svenska"],
onsdagLektioner: ["Matte", "So", "Idrott", "Engelska", "No", "Elevens val"],
torsdagLektioner: ["No", "Hemkunskap" , "So" , "Samling", "No" , "Språk"],
fredagLektioner: ["Svenska" , "Matte", "Idrott" , "So"]
},
value = document.getElementById('dag').value.trim().toLowerCase();
document.getElementById('lektioner').innerHTML = dagar[ value + 'Lektioner'].join('<br />');
}
document.getElementById("print").onclick = function() { var dagar = { måndagLektioner: ["Engelska", "Bild", "Språk", "Slöjd", "Svenska"], tisdagLektioner: ["So", "Språk", "No","Matte", "Musik", "Svenska"], onsdagLektioner: ["Matte", "So", "Idrott", "Engelska", "No", "Elevens val"], torsdagLektioner: ["No", "Hemkunskap" , "So" , "Samling", "No" , "Språk"], fredagLektioner: ["Svenska" , "Matte", "Idrott" , "So"] }, value = document.getElementById('dag').value.trim().toLowerCase(); document.getElementById('lektioner').innerHTML = dagar[ value + 'Lektioner'].join('<br />'); }
<p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <p id="lektioner"></p>
And, frankly, since you're clearly working with an ordered list, I'd be remiss if I didn't suggest (and quite strongly) that you use an <ol> rather than a <p> :
document.getElementById("print").onclick = function() {
var dagar = {
måndagLektioner: ["Engelska", "Bild", "Språk", "Slöjd", "Svenska"],
tisdagLektioner: ["So", "Språk", "No", "Matte", "Musik", "Svenska"],
onsdagLektioner: ["Matte", "So", "Idrott", "Engelska", "No", "Elevens val"],
torsdagLektioner: ["No", "Hemkunskap", "So", "Samling", "No", "Språk"],
fredagLektioner: ["Svenska", "Matte", "Idrott", "So"]
},
value = document.getElementById('dag').value.trim().toLowerCase(),
// create a document fragment, to contain the HTML (rather
// than forcing a redraw every time a new element is added):
frag = document.createDocumentFragment(),
// creating an <li> element:
li = document.createElement('li'),
// a named, but uninitialised, variable to use within the loop:
clone;
// using Array.prototype.forEach() to iterate over the lessons array:
dagar[value + 'Lektioner'].forEach(function(lesson) {
// cloning the created <li> (to avoid calling
// document.createElement() multiple times):
clone = li.cloneNode();
// setting the text to the string held in the current
// array-element over which we're iterating:
clone.textContent = lesson;
// appending the cloned <li> to the document fragment:
frag.appendChild(clone);
});
// appending the document fragment to the element with the
// id of 'lektioner':
document.getElementById('lektioner').appendChild(frag);
}
document.getElementById("print").onclick = function() { var dagar = { måndagLektioner: ["Engelska", "Bild", "Språk", "Slöjd", "Svenska"], tisdagLektioner: ["So", "Språk", "No", "Matte", "Musik", "Svenska"], onsdagLektioner: ["Matte", "So", "Idrott", "Engelska", "No", "Elevens val"], torsdagLektioner: ["No", "Hemkunskap", "So", "Samling", "No", "Språk"], fredagLektioner: ["Svenska", "Matte", "Idrott", "So"] }, value = document.getElementById('dag').value.trim().toLowerCase(), frag = document.createDocumentFragment(), li = document.createElement('li'), clone; dagar[value + 'Lektioner'].forEach(function(lesson) { clone = li.cloneNode(); clone.textContent = lesson; frag.appendChild(clone); }); document.getElementById('lektioner').appendChild(frag); }
<p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <ol id="lektioner"></ol>
Also, rather than using element.onclick I'd suggest using HTMLElement.addEventListener() to be more standards-compliant:
function showDay() {
var dagar = {
måndagLektioner: ["Engelska", "Bild", "Språk", "Slöjd", "Svenska"],
tisdagLektioner: ["So", "Språk", "No", "Matte", "Musik", "Svenska"],
onsdagLektioner: ["Matte", "So", "Idrott", "Engelska", "No", "Elevens val"],
torsdagLektioner: ["No", "Hemkunskap", "So", "Samling", "No", "Språk"],
fredagLektioner: ["Svenska", "Matte", "Idrott", "So"]
},
value = document.getElementById('dag').value.trim().toLowerCase(),
frag = document.createDocumentFragment(),
li = document.createElement('li'),
clone;
dagar[value + 'Lektioner'].forEach(function(lesson) {
clone = li.cloneNode();
clone.textContent = lesson;
frag.appendChild(clone);
});
document.getElementById('lektioner').appendChild(frag);
}
// getting references to the <button> and the <input />:
var button = document.getElementById('print'),
dayInput = document.getElementById('dag');
// adding the showDay() function as the event-handler for:
// the 'click' event on the <button>:
button.addEventListener('click', showDay);
// the 'change' event on the <input />:
dag.addEventListener('change', showDay);
function showDay() { var dagar = { måndagLektioner: ["Engelska", "Bild", "Språk", "Slöjd", "Svenska"], tisdagLektioner: ["So", "Språk", "No", "Matte", "Musik", "Svenska"], onsdagLektioner: ["Matte", "So", "Idrott", "Engelska", "No", "Elevens val"], torsdagLektioner: ["No", "Hemkunskap", "So", "Samling", "No", "Språk"], fredagLektioner: ["Svenska", "Matte", "Idrott", "So"] }, value = document.getElementById('dag').value.trim().toLowerCase(), frag = document.createDocumentFragment(), li = document.createElement('li'), clone; dagar[value + 'Lektioner'].forEach(function(lesson) { clone = li.cloneNode(); clone.textContent = lesson; frag.appendChild(clone); }); document.getElementById('lektioner').appendChild(frag); } var button = document.getElementById('print'), dayInput = document.getElementById('dag'); button.addEventListener('click', showDay); dag.addEventListener('change', showDay);
<p>Skriv in en dag</p> <input id="dag" /> <button id="print">Klick</button> <ol id="lektioner"></ol>
References:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I add linebreaks in a InnerHTML javascript
JavaScript use for loop to create p tag with innerHTML content filled in
JavaScript innerHTML text linebreaks
How do I display the content of a JavaScript object in a string format using document.getElementById(“abc”).innerHTML DOM?
How i can store all content from <p> tag in array using javascript and jquery?
In JavaScript, how do I make it so hovering over the label will output in a p tag the value of the radio button?
How can i set array of content for <p> tag with one id using javascript or jquery
How to change the text inside of p tag with a class by using innerHTML
How to display jquery datepicker value in <p> tag using innerHTML
content not fully replaced in p tag (with nested h3 tag) on using innerHTML property
Related Tags