Develop Reference

Javascript add linebreak, \n not working

I want to add a linebreak in Javascript, but \n is not working and nothing else I found so far is not working (like <br> or \n). Also, because of the programming I cannot use .appendChild.
for (i=getchilds();i<number;i++){
container.appendChild(document.createTextNode("\n" + "Pers. " + (i+1) + " \u00a0"));
var input = document.createElement("input");
input.type = "number";
container.appendChild(input);
}

I think you may be confusing whitespace with the representation of whitespace. In your case you're appending characters that represent white-space to a string that you intend to be displayed as a line-break. I assume you're then appending it to an element whose style is not set to display it as white-space.
There are four basic ways to fix this:
Use an ordered list. If you can, do this, since it will be both structural and semantic. Notice the link shows how to control the list-item text (controlling the start number is more challenging).
If the container-referenced element accommodates this, add white-space: pre to it's style. This will cause your line-breaks to come into view. It's best to do this with CSS, but you can do it with Javascript too.
Replace the \n with a <br>. Denys Séguret has an example of this.
Use a pre tag for the container-referenced element. <pre> automatically respects and displays line-breaks in content. This of course implies your content accommodates using a pre-formatted tag.

Change your code to insert into a textarea or a set of pre tags.
You might see your code injecting a single space in place of the line breaks in a plain text input of your browser is Firefox chrome or opera.

You can't insert \n in text node and have them correctly rendered in an element with standard white-space rendering.
Two solutions here:
insert <br> elements
container.appendChild(document.createElement("BR"));
container.appendChild(document.createTextNode("Pers. " + (i+1) + " \u00a0"));
use innerText in SPAN
var node = document.createElement("SPAN");
node.innerText = "\n Pers. " + (i+1) + " \u00a0";
container.appendChild(node);
The first one is the most relevant in your case, but the fact innerText doesn't remove newlines (contrary to textContent) is often useful.

Removing spaces between lines in JavaScript

I'm just learning JavaScript, and I've come up with the following page that "draws" a guitar fretboard by creating a 6X16 grid of images (the first column is the set of "open notes" on the very left hand side of the image grid). The page is here.
Each of the six rows represents a string on the guitar so, six strings, six rows. But what I can't figure out is how to make the rows butt up right next to each other, with no whitespace between the top of one row and the bottom of the next. So, what I get is this:
But what I want is this:
The way that the JavaScript works is to run through a loop that is 16 items long - one "open string" image, and 15 "fretted note" images, and at the end of the loop it generates a <br/>tag. These strings are inserted into an InnerHTML value of a <p> element, and the grid of images gets drawn. Here is the line of code that generates, as an example, the fretted note image:
for(frets=0; frets < 17; frets++){
GuitarNeckImg.innerHTML = GuitarNeckImg.innerHTML + "<img title=" + allNotes[frets + 1] + " src=images\\" + allFretImages[frets + 1] + ">";
continue;
}
What I don't understand is:
What CSS attribute/value pairs do I need to enter to get the images
to not have any space between them above and below,and
How do I write the JavaScript code to add those CSS attribute/value pairs to the tag in my code?
Add'l information:
I have tried, as an example, to write the following code in my JS file:
GuitarNeckImg.innerHTML = GuitarNeckImg.innerHTML + "<img title=" + allNotes[frets + 1] + " style=padding:0px; margin:0px;" + " src=images\\" + allFretImages[frets + 1] + ">";
But this produces the following HTML output:
<img title="F.Esharp.Gbb" style="padding: 0px;" src="images\F.jpg" margin:0px;="">
So the first problem is specifically around JS syntax and how I need to craft the code statement to generate multiple attribute/value pairs for the style tag, and the second is which CSS tags I should use to get my desired results.
Thanks in advance, and please feel free to let me know what additional information I can provide.

An appropriate line-height value, such as 0.70, should do exactly what you want.

Try this...
//We define the text variable that needs to be cleansed of line breaks.
Var someText = "Here's some text.\n It has some line breaks that will be removed \r using Javascript.\r\n";
//This javascript code removes all 3 types of line breaks
someText = someText.replace(/(\r\n|\n|\r)/gm,"");
Best of luck...

javascript not passing strings with more than 1 word to HTML

...
results += "href=" + "JavaScript:" + "decrement(" + "'" + requestList[i].name + "'" +")>";
...
document.getElementById("demo").innerHTML=results;
The problem is when in the requestList[i].name is a string with more than 1 word, but with 1 word it works.
And when i inspect element in chrome and firefox, it only appears this:
Example: requestList[i].name = "John travolta";
<a href='JavaScript:decrement("John" travolta")>
And when i hover my mouse over the element:
JavaScript:increment("John
Any idea?

Try this:
results += "href=\"JavaScript:decrement('" + requestList[i].name + "')\">";
Your concatenation is confusing. Try to simplify it. Escape the " with \" in order to use ' inside it, so your text will be nice no matter how much spaces it haves. The result will be:
href="JavaScript:decrement('John Travolta')">
So now you have to add the rest of your tag. Just a tip: Try to use your a tag with custom click like this:
href="javascript:void(0)" onclick="decrement('')"
I hope it helps. Good luck.

If you console.log(results), you will see something like this:
<a href=JavaScript:decrement('John Travolta')>
Does this look like valid HTML to you? ;) Put quotes around attribute values.

You have a syntax error here
<a href='JavaScript:increment("John" travolta")>'
remove the quote mark between 'John' and 'travolta'

Setting the Input Value attribute to a variable with space.

I am trying to set the value of a input button to a string variable.i.e"A Guide to the School Bus"; But when the HTML loads up only the first word comes up in the button. My code is given below. Thanks for the help.
var title="A Guide to the School Bus";
var htmlString= "<div class="+title+ ">"+"<input type="+"button "+"value="+title+" onclick=loadBook()>"+"</div>";
$(htmlString).appendTo(attachPoint);
And the attachpoint is a reference in the HTML that i got using the following.
var attachpoint=document.querySelector('.buttonAttachPoint');

The problem is because you're not putting quotes around the attribute values. Try this:
var htmlString= '<div class="'+title+'"><input type="button" value="'+title+'" onclick="loadBook()"></div>';
You can either escape all the " in your string or, like I have done, just switch between ' and ". " will show up as a normal character and ' is used to mark the start and finish of strings.
As a side point you probably wouldn't want to put the variable title as the class on the div as it would add each separate word as a class, so in your example the div would have 6 classes added to it.

select multiple line breaks regex

So what I am trying to do is replace one or more instances of newline with the br tag in javascript. So far I have:
description.replace(/\n/g, '<br />');
However if there is a case where there are 2/3 newlines's in a row I get 2/3 br tags. Is there a way in regex to say give me any instances of one or more newlines's in a row and replace that whole thing with one br tag so that even if I have:
\n\n\n\n\n\n\n\n\n
that would get replace with just:
<br >

You can add the + quantifier to indicate one or more matches.
description.replace(/\n+/g, '<br />');
PS: you need to read more about regular expressions, this was fairly straight forward.

description.replace(/\n+/g, '<br />');
happy homework