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>
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.
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.
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.
I have two suggestions… or really one with two parts:
Change from document.getElementById(‘spanResult’).textContent
to document.getElementById(‘spanResult’).innerHTML
as line breaks and such are in fact markup and not plain text.
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
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}`