1

I am newly learning code and have encountered some issues with javascript/jquery and how it is running/being displayed on my HTML page.

At this point in time I am running drills in CodePen and have run into an issue where my HTML heading is not being displayed on my page load but my javascript is running as expected. My goal is to have my displayed and the javascript running below it and I suspect it has something to do with my usage of the $(document).ready method.

Is there something I am missing or misunderstanding in my code that when my page loads the h2 is not showing up?

$(document).ready(function() {
  for (x = 1; x < 100; x++) {
    if (x % 3 === 0 && x % 5 === 0) {
      document.write("FizzBang" + '<br/>')
    } else if (x % 3 === 0) {
      document.write("Fizz" + '<br/>')
    } else if (x % 5 === 0) {
      document.write("Bang" + '<br/>')
    } else {
      document.write(x + '<br/>')
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Challenge 2</h2>
Quasimodo's clone
  • 5,511
  • 2
  • 18
  • 36
Matt Tremaine
  • 11
  • 1

4 Answers4

2

document.write is a nasty bugger. It will overwrite any content in the document.

Forget it exists. Don't use it.

If you want to do debugging use console.log() and open the console (F12 in most browsers).

Halcyon
  • 54,624
  • 10
  • 83
  • 122
1

$(document).ready(func) or the shortcut $(func) as well as the native event document.addEventListener('DOMContentLoaded', func) run after the document has been parsed and the DOM is ready. The old style document.write() which is still supported writes directly into the document's parsing stream while it is parsed. Then the document's state is automatically closed. When you start to write to the document after paring has been finished, the document is implicitly reopened and the content is cleared.

The common concept of dynamic changing document's content is DOM manipulation.

See also: Introduction to the DOM (MDN)

Quasimodo's clone
  • 5,511
  • 2
  • 18
  • 36
0

If you want the same result with the heading this can help

<h2>Challenge 2</h2>
<div id="test"></div>

and js part

for (x = 1; x < 100; x++) {
    if (x % 3 === 0 && x % 5 === 0) {
      document.getElementById("test").innerHTML+="FizzBang" + '<br/>';
    } else if (x % 3 === 0) {
      document.getElementById("test").innerHTML+="Fizz" + '<br/>';
    } else if (x % 5 === 0) {
      document.getElementById("test").innerHTML+="Bang" + '<br/>';
    } else {
      document.getElementById("test").innerHTML+=x + '<br/>';
    }
  }

Best regards.

Fabio Assuncao
  • 604
  • 2
  • 11
0
<html>
  <head>
        <meta charset="UTF-8">
        <title>Challenge 2</title>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

  </head>
  <body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
  </body>

      <script type="text/javascript">
$(window).on('load', function() { // makes sure the whole site is loaded 
    $( "body" ).prepend( '<div id="preloader"><div id="status"><h1>Challenge 2</h1></div></div>' );
for (x = 1; x < 100; x++) {
    if (x % 3 === 0 && x % 5 === 0) {
      document.getElementById("test").innerHTML+="FizzBang" + '<br/>';
    } else if (x % 3 === 0) {
      document.getElementById("test").innerHTML+="Fizz" + '<br/>';
    } else if (x % 5 === 0) {
      document.getElementById("test").innerHTML+="Bang" + '<br/>';
    } else {
      document.getElementById("test").innerHTML+=x + '<br/>';
    }

  }

});

    </script>
</html>

Perhaps you could try this? you could also switch $(window).on('load', function() with $(document).ready(function() since my understanding for this case is that, they pretty much do the same thing just one is earlier another is later

chernwen123
  • 11
  • 3