I am writing a program which creates a slanted d based off of user input. The program asks for the number of rows and produces the output accordingly. If the user enters in 5 it should produce an output of:
d
d
d
d
My actual output is:
d
d
d
d
Here is my Javascript code:
spaceArray = [];
space = ' ';
spaceMain = ' ';
function processingFunction(rows){ //passes the input as variable rows
var spaceCounter = 0;
var counter = 0;
while (counter<rows){
while (spaceCounter<counter){
spaceMain = spaceMain + space; //adds a space before the d
spaceCounter++;
}
counter++;
spaceCounter=0;
spaceArray.push(spaceMain); //adds spaceMain to the end of spaceArray
spaceMain = ' ';
}
for (i = 0; i<rows; i++){
d = spaceArray[i]+"d<br>";
document.getElementById("outputNumber1").innerHTML += d;
}
}
When I replace the space variable string from ' ' to '-' it seems to work with an output of:
d
-d
--d
---d
I am not sure what I need to change to get the above output but with spaces instead of dashes.
HTML:
<!DOCTYPE>
<html>
<head>
</head>
<style>
body{background-color: green;}
</style>
<body>
<center><h2>Slanted d</h2></center>
<h3>Input the number of rows you would like your slanted d to be in the input text box</h3>
<input type="text" id="inputNumber"></input>
<button type="button" onclick="processingFunction(document.getElementById('inputNumber').value)">Create slanted d</button>
<br><br>
<output type="text" id="outputNumber1"></output>
<script src="slantedDJS.js"></script>
</body>
</html>
I am writing a program which creates a slanted d based off of user input. The program asks for the number of rows and produces the output accordingly. If the user enters in 5 it should produce an output of:
d
d
d
d
My actual output is:
d
d
d
d
Here is my Javascript code:
spaceArray = [];
space = ' ';
spaceMain = ' ';
function processingFunction(rows){ //passes the input as variable rows
var spaceCounter = 0;
var counter = 0;
while (counter<rows){
while (spaceCounter<counter){
spaceMain = spaceMain + space; //adds a space before the d
spaceCounter++;
}
counter++;
spaceCounter=0;
spaceArray.push(spaceMain); //adds spaceMain to the end of spaceArray
spaceMain = ' ';
}
for (i = 0; i<rows; i++){
d = spaceArray[i]+"d<br>";
document.getElementById("outputNumber1").innerHTML += d;
}
}
When I replace the space variable string from ' ' to '-' it seems to work with an output of:
d
-d
--d
---d
I am not sure what I need to change to get the above output but with spaces instead of dashes.
HTML:
<!DOCTYPE>
<html>
<head>
</head>
<style>
body{background-color: green;}
</style>
<body>
<center><h2>Slanted d</h2></center>
<h3>Input the number of rows you would like your slanted d to be in the input text box</h3>
<input type="text" id="inputNumber"></input>
<button type="button" onclick="processingFunction(document.getElementById('inputNumber').value)">Create slanted d</button>
<br><br>
<output type="text" id="outputNumber1"></output>
<script src="slantedDJS.js"></script>
</body>
</html>
4 Answers
Reset to default 8In place of spaces use the html code your code will start working, because by default the browser accepts only a single space no matter how many you give.
Example:
space = ' ';
By default, the browser will collapse all spaces into a single space.
One solution is to use the <pre> element for the output instead. Like this:
<pre type="text" id="outputNumber1"></pre>
<pre> shows pre-formatted text. So the output is displayed with all spaces and newlines preserved.
If you don't want to change the element type, you can add the CSS declaration white-space:pre to the element to achieve the same result as above. Like this:
<output type="text" id="outputNumber1" style="white-space:pre;"></output>
or you can set it separately in your <style> block like this:
<style>
body{background-color: green;}
#outputNumber1{white-space:pre;}
</style>
You can use   which stands for No-break space In the html language.
use nbsp this add a non breaking space to your html.
position,left,margin,padding, etc. – Redu Commented Mar 4, 2017 at 17:52