Is there a reason this JavaScript is not displaying?

Question

So I am making this code assignment, and when I went to validate it, it seems the JavaScript wasn't being "called." So I checked my code. The HTML elements call the JavaScript okay, there are no typos, and I still haven't found the problem!

HTML

<html>
<head>
<title>Conditional statements and Loops</title>
</head>
    
<body>
<script type="text/javascript" src="pattern_javascript.js">
</script>
</body>
</html>

JS

function loop() {
var asterisk = ["*", "**", "***", "****", "*****", "******", "*******", "********"];
var text = "";
var i;
for (i = 0; i < asterisk.length; i++) {
text += asterisk[i] + "<br>";
}
}

loop()

You don't do anything with text, you aren't displaying it in anyway. — imvain2, Jul 02 '20 at 15:29
You're storing a string in a variable. You aren't doing anything that would make it display anywhere. — Quentin, Jul 02 '20 at 15:29
you are only appending the text to a string variable, without outputting it — Daniel Resch, Jul 02 '20 at 15:30
@amateur_coder No, it wouldn’t. Something like `console.log(text);` would (if you were to replace `
` by `\n`). Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and see your output there. If you want to output it in HTML, use `document.body.innerHTML = text;`. Try figuring out where to put one of these lines of codes yourself; you want to output this when you call the `loop` function, so it must be in the `loop` function body, but not every iteration, so outside `for`, but after the string is finished. So where do you put it? — Sebastian Simon, Jul 02 '20 at 15:30
@amateur_coder Please [edit] your question if you’re going to provide screenshots. — Sebastian Simon, Jul 02 '20 at 15:35

Álvaro González · Answer 1 · 2020-07-02T17:47:37.420

1

You define and populate several local variables, then discard them all without displaying anything. You possibly want a return statement:

function loop() {
  var asterisk = ["*", "**", "***", "****", "*****", "******", "*******", "********"];
  var text = "";
  var i;
  for (i = 0; i < asterisk.length; i++) {
    text += asterisk[i] + "<br>";
  }
  return text; // <------------
}

document.querySelector("section").innerHTML = loop();

<section></section>

edited Jul 02 '20 at 17:47

answered Jul 02 '20 at 15:32

Álvaro González

128,942
37
233
325

Hey! I found a solution, and I am marking this the correct answer since it is similar. I replaced the console.log with a document.write and it is now displaying. Thank you! – amateur_coder Jul 02 '20 at 15:39
1

@amateur_coder `document.write` is [not recommended](https://stackoverflow.com/q/802854/4642212) for DOM manipulations, as it is obsolete, slow and not suitable for any evolving application. – Sebastian Simon Jul 02 '20 at 15:41
1

This code does not satisfy the question asked here, As the user needs the text to be displayed on the HTML and not on the console. – Karthik Radhakrishnan Jul 02 '20 at 15:43
@user4642212 ok, I will try the other users answer. – amateur_coder Jul 02 '20 at 15:46
@KarthikRadhakrishnan The question didn't state anything like that. Such new requirement was made afterwards in some followup comments. I'll update the answer anyway. – Álvaro González Jul 02 '20 at 17:46

score 0 · Accepted Answer · answered Jul 02 '20 at 15:41

The value of text is being generated properly. However you need to use the text somewhere in the html

function loop() {
var asterisk = ["*", "**", "***", "****", "*****", "******", "*******", "********"];
var text = "";
var i;
for (i = 0; i < asterisk.length; i++) {
text += asterisk[i] + "<br>";
}
document.getElementById("demo").innerHTML=text;
}

loop()

HTML

<html>
<head>
<title>Conditional statements and Loops</title>
</head>

<body>
<p id="demo"></p>
<script type="text/javascript" src="pattern_javascript.js">
</script>
</body>
</html>

Ref: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid

With another user marking document.write as obsolete, I mark this the correct answer. — amateur_coder, Jul 02 '20 at 15:48
@amateur_coder None of the answers mention `document.write`. — Sebastian Simon, Jul 02 '20 at 17:49

Is there a reason this JavaScript is not displaying?

2 Answers2