What's wrong with my code in my website

Question

I am just a beginner so be easy on me

while (true){
//hide the paragraph
   $("para").hide()
//show the paragraph slowly
   $("para").show("slow")
}

p{
 font-size:1500%;
 text-align: center;
 margin:0;
}

body{
 background:yellow;
}

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="main.css">
</head>
<body>
 <p id="para">this is disco</p>
</body>
 <script src = "jquery.js"></script>
 <script src = "main.js"></script>
</html>

The jquery.js is the file name of the compressed jquery in my computer when i run it the page doesnt show up

Is jquery.js in the same folder as your html file? Check in your browser's developer tools if it received a 404 error whilst loading. — jedifans, Aug 13 '16 at 08:13
With the current code in your `while (true)` loop, it'll always execute and lead to an infinite loop. — HiDeoo, Aug 13 '16 at 08:13
`$("para")` matches `` elements. What you want is `$("#para")` to match elements with `id="para"`. — str, Aug 13 '16 at 08:14

score 1 · Answer 1 · edited May 23 '17 at 11:51

 while (true) { … }

will keep running forever (infinite loop) and block the UI, since JS is single threaded. It will also hide the paragraph over and over again. If you want to hide a paragraph you should use:

$(document).ready(function(){ 
    //hide the paragraph
    $("p#para").hide()
    //show the paragraph slowly
    $("p#para").show("slow");
})

to do all that stuff after the page has loaded.

If you would like to make the paragraph blink, so that it gets hidden after it showed up »slow«, you can do that using a timer, after the page has loaded:

(function blink () {
    $("p#para").hide()
    //show the paragraph slowly
    $("p#para").show("slow");

    setTimeout(blink, 1000);
})();

or a CSS animation.

If you want to make the text blink, you don't need to use JS at all. Have a look here: Imitating a blink tag with CSS3 animations

The »sliding« effect is caused by jQuery's show() method, documented here.

yes, i want the text to blink but the text is sliding in and out when i set the timer what should i do — Kunal_Boss, Aug 13 '16 at 09:22

score -1 · Answer 2 · answered Aug 13 '16 at 08:15

-1

It must be $("#para"). $("para") searches for an element <para> which does not exist.

answered Aug 13 '16 at 08:15

mm759

1,404
1
9
7

2

Missing the elephant in the room there, aren't you (the infinite `while` loop...) – Niet the Dark Absol Aug 13 '16 at 08:19
I thought this is only for testing. – mm759 Aug 13 '16 at 08:33

score -1 · Answer 3 · answered Aug 13 '16 at 08:23

-1

The element id is "para",so for you to manipulate it the selector should be preceeded by "#" i.e "#para"

$(document).ready(function(){ 
//hide the paragraph
$("#para").hide()
//show the paragraph slowly
$("#para").show("slow")

})

answered Aug 13 '16 at 08:23

Dennis Omondi

1
1

What's wrong with my code in my website

3 Answers3