Inline Javascript is breaking my HTML/CSS

Question

This is my first attempt to use jquery, javascript and HTML/CSS in one site. I have a working inline script tag that utilizes jquery and javascript. Unfortunately I can't seem to create ANY structure on the page (an h1 title, an aside, moving the rendered javascript anywhere...) while this script is in my index.html. I've done lots of research but there is some fundamental I'm missing here as I can have only one or the other. Can anyone point me in the right direction? Here's a curtailed section:

<body>
<script>
  $(document).ready(function(){
    var $body = $('body');
    $body.html('');
    //code code code
    }
  });
</script>

I've tried putting my html within the body and outside of the script, in the script but outside of the jquery function, and inside the jquery function. How could I get a simple "Hello World" up on this page?

The problem is that you put two closing curly brackets for just one function tag. }); is enough. Remove the "lonely" curly brackets — Frederik Witte
– Frederik Witte, Commented Apr 7, 2015 at 19:14
What is //code code code? This : $body.html('') clears all the content of your page... — Shikkediel
– Shikkediel, Commented Apr 7, 2015 at 19:14

Steve · Accepted Answer · 2015-04-07 19:14:54Z

2

What's happening is that once the page is finished loading, or ready, you are setting the HTML to nothing via $body.html('').

You could try changing it to $body.append('This was generated by jQuery!') and you'll see your hardcoded HTML in addition to some text.

answered Apr 7, 2015 at 19:14

Steve

3801 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Steve Over a year ago

I think the presented Javascript is not fully accurate of what is being used, as it must be running if the body is coming up empty when HTML is present on the page.

bananabanana Over a year ago

Thanks! That was the issue. I'm still pretty new to jquery and javascript, so silly things like this can derail me for entirely too long.

Steve Over a year ago

I feel you, I remember going through similar experiences! One thing that helps a lot during learning javascript testing is console.log(), which outputs text or values on to your browser's Javascript console. Good luck!

124c41 · Accepted Answer · 2015-04-07 19:20:01Z

1

Your Script is a Child of the Body, which inner html you are clearing by asigning an empty String - deleting your inline Script in the process. Have you tried moving your Script to the Head section?

answered Apr 7, 2015 at 19:20

124c41

1101 silver badge8 bronze badges

Collectives™ on Stack Overflow

Inline Javascript is breaking my HTML/CSS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related