Spacing and line breaks in JS

Hello all new to this.
But am hoping someone can help me out. I am trying to get the output of this could to have space and line breaks. so it would look more like a letter then a line of jumbo.

<!DOCTYPE html>
<html>
<head>


    <script>
        function testVariable() {
            var strTime = document.getElementById("time").value;
            var strName = document.getElementById("name").value;          
            var strUname = document.getElementById("uname").value;
            var strLoca = document.getElementById("loca").value;
            var result = 'Good ' +  strTime +  
            'Can we please have the following users password reset.' +
            'Name: '+ strName + 
            'Username: ' + strUname  +
            'Location: ' + strLoca +
            'Thank you';
            document.getElementById('spanResult').textContent = result;
             
        }
    </script>
</head>
<body> 
Password Reset <br><br>
Time:	  <input type="text" id="time" /><br><br>
Name: <input type="text" id="name" /><br><br>
Username: <input type="text" id="uname" /><br><br>
Location: <input type="text" id="loca" /><br><br>
<button  onclick="testVariable()">Submit</button> <br /><br>
    <span id="spanResult">

    </span>
   
     
</body>
</html>

Thank you all

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

I was able to do it following this advice. You could also use something like innerHTML to inject some html. You could also have the html built in your html section and just toggle whether or not it is visible.

Thank Kevin

But I am totally lost on what you mean in both reply, is there nothing I can insert to put in spaces and blank lines??

The p element is a way to create a new paragraph for each section. What is the exact way you are wanting the above to appear on the page?

JavaScript strings can have escape sequences (here is the freeCodeCamp lesson), but in this case the logical thing to do is to control your layout via HTML and CSS.

Hi Randell

So right now it looks like this

Good morning Can we please have the following users password reset.Name: JonUsername: jsmithLocation: torontoThank you

but I want it to look like this

Good morning

Can we please have the following users password reset.

Name: Jon
Username: jsmith
Location: Toronto

Thank you

Thank in advance

Separate p element

Separate p element

Separate p element with each line with a <br> tag at the end of each line

Separate p element

Thanks again Randell

How would that look in the code for example because I must be doing something wrong

Thanks

What other code have you tried since you last posted? You will need to incorporate the p elements as I specified when building your result string.

I am sure I am doing something wrong with the P element

BR, P, N so far not sure what happening but i a very new at this

@bfdan Post your latest code.

<!DOCTYPE hthttps://www.w3schools.com/ml>
<html>
<head>


    <script>
        function testVariable() {
            var strTime = document.getElementById("time").value;
            var strName = document.getElementById("name").value;          
            var strUname = document.getElementById("uname").value;
            var strLoca = document.getElementById("loca").value;
            var result = 'Good ' +  strTime +  
            'Can we please have the following users password reset.' +
            'Name: '+ strName + 
            'Username: ' + strUname  +
            'Location: ' + strLoca +
            'Thank you';
            document.getElementById('spanResult').textContent = result;
             
        }
    </script>
</head>
<body> 
Password Reset <br><br>
Time:	  <input type="text" id="time" /><br><br>
Name: <input type="text" id="name" /><br><br>
Username: <input type="text" id="uname" /><br><br>
Location: <input type="text" id="loca" /><br><br>
<button  onclick="testVariable()">Submit</button> <br /><br>
    <span id="spanResult">

    </span>
   
     
</body>
</html>

I have two suggestions… or really one with two parts:

  1. Change from document.getElementById(‘spanResult’).textContent
    to document.getElementById(‘spanResult’).innerHTML
    as line breaks
    and such are in fact markup and not plain text.
  2. Spoiler Alert. (if you haven’t got to these yet) Try experimenting with template strings… where you can avoid using ‘+’ to concatenate and save that for math. I find using template strings (sometimes called template literals) makes the semantic flow easier to read. Template literals (Template strings) - JavaScript | MDN

Thank you Thundermoth

So when I replace textcontent to innerHTML what do I need to do to put the spaces in?

The basic rules when using a template literal are that you must use back ticks INSTEAD of ‘quotes’, and put your variables inside of curly braces preceded by a dollar sign… result = `Some text ${myVariable}`

1 Like

I explained earlier what elements you need to add for line breaks and spacing. Try to implement it in your existing code. I do not see you added anything other than what you had last time you posted.

AWESOME THANK YOU THUNDERMOTH!!!

worked :slight_smile:

1 Like