Newline characters not working

CS Principles Unit and Lesson Discussion
,
1

Hi, is anyone else experiencing the newline characters “\n” not working? I have several kids where this is happening, and I can’t find any problems with their code.

Thanks!

2

Nevermind. I figured out the problem. The kids MUST create a text area box first.
The newline character doesn’t format onto the background.

3

We are having problems with the new line characters. We either receive an error in the cosole.log or the message prints /n

Any help you can provide is appreciated?

4

I wonder if the issue is forward slash v. backslash?

In your message above you are using a forward slash /. The character for newline requires a backslash \

Test it out: this statement should display foo on 3 separate lines the console.

console.log("foo\nfoo\nfoo");

5

Hi DZulkiewski,

I’m sure Baker’s answer fixed your problem. But just also letting you know that if the kids don’t actually drag a ‘text area’ element onto the background to set the text to, the newline characters won’t work. In other words, we found that newline characters don’t work when setting text directly to the app screen.

6

It didn’t work for my students unless they used single quote marks and “added” it to the lines of text:
Example: + ‘\n’ +
It NEVER worked without quotes, and it didn’t work with double quotes as shown in the reading.

7

Some students drag in a textInput instead of a textArea. newline does not work with the textInput element.

My students were able to recreate the issue. Some used a textInput element and dragged its size to make it look like a textArea.

This was not caught initially by me because it looked like a textArea, and I did not ask them to go to the design tab to check,

8

@zsawyer thanks for bringing that up! That is a frequent “miss” by me as well!

9

@zsawyer

I came here with the same error that a few of my students were making, and your fix worked. Thanks!

1 Like
10

I am dragging the text area into a phone app screen, and \n does not work to create a new line, and there is to “wrap” feature on the text area. Any help? From code.org, hopefully?

11

Would you please provide a sample app demonstrating the problem so we can see the context and the code? I personally am not seeing this issue.

12

It’s a problem that seems to only happen sometimes - happened to one of my students, and happened to me, but I found a fix. I got this code in this code.org questions section, and it fixed it for me and the student.
setStyle(“ta”, “white-space: pre; overflow-wrap: normal;”);
setText(“ta”, “a very very very very very\nvery very very very very\nvery very very very very\nvery very very very very\nvery long line of text”);
The long text line was correctly placed on newlines, while previously it just horizontally went off the screen. Thanks.