I was wondering if someone can help me out. The issue I'm having is the '#' and 'spaces' are being displayed individually on their own line, what I'm trying to have is a layout like this (without the quotes at the end of each line):
"# # # #"
"# # # #"
"# # # #"
The code would display four '#' each line. The length is determined by the number the user is prompt with.
Any help is greatly appreciated, thanks again.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://ift.tt/1JetChn">
<script src="http://ift.tt/1ROJ5xx"></script>
<script src="http://ift.tt/1RY4jZJ"></script>
<title>Q3 Display</title>
<style>
.resultText {
display: inline-block;
}
</style>
</head>
<body>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#q3" aria-controls="q3" role="tab" data-toggle="tab">Q3</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Question 3 Start -->
<div role="tabpanel" class="tab-pane tab-pane active" id="q3">
<div class="row">
<div class="col-md-12">
<pre>
Question 3 code:
</pre>
</div>
<div class="col-md-12">
<!-- button -->
<button id="q3-button" class="btn btn-default" type="button">Question Three Solution</button>
</div>
<div class="col-md-12">
<!-- result -->
<div id="result"></div>
</div>
</div>
</div>
<script>
//Question 3
//When the button is clicked, begin the function called start
$("#q3-button").on("click", function(){
start();
});
function start(){
//Sets up user prompt
var start = parseInt(prompt("How long would you like the side to be?"));
//Determine if what was entered in prompt is a number
if (isNaN(start)) {
alert("That's not a number, please retry.");
var start = prompt("Please re-enter a number.");
}
//Grabs the result div and assigns it a variable, will be used later on for result printing
var element = document.getElementById("result");
for (var i=1; i<=start; i++){
for(var j=1; j<=8; j++){
if((i+j)%2==0){
//Creates <p></p> element
var p1 = document.createElement("p");
//sets a class to the <p></p> element
p1.setAttribute("class", "resultText");
//Sets a variable to hold the text the <p></p> should contain
var node1 = document.createTextNode("#");
//Actually adds the text to the <p></p> element
p1.appendChild(node1);
//adds the <p></p> tag to the results div
element.appendChild(p1);
}
else {
//Creates <p></p> element
var p2 = document.createElement("p");
//p2.setAttribute("class", "resultText");
//Sets a variable to hold the text the <p></p> should contain (in this case an empty tag)
var node2 = document.createTextNode(" ");
//Actually adds the text to the <p></p> element
p2.appendChild(node2);
//adds the <p></p> tag to the results div
element.appendChild(p2);
}
}
}
}
</script>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire