JavaScript Code Not Work in Head Tag

javascript code not work in HEAD tag

Your script relies on the DOM being ready, so you need to execute that function call only after the DOM is ready.

<script language="javascript" type="text/javascript">

window.onload = function() {
    document.getElementById("msg1").innerHTML = document.URL.toString();
}

</script>

js external is not working in head tag of html

Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. If your script tries to access an element in the <body> of your file, it will fail because that part of the DOM is not loaded as yet.

Place your script before the end <body> tag.

https://developers.google.com/speed/docs/insights/BlockingJS

Why my code doesn't work when the script tag is in the head tag?

First, the HTML get parsed from top to bottom, So Whatever encounter first will get run.

If you put script tag at the end of the head tag then It will run first before the HTML body so you can't set width because when you used

document.getElementById("video")

It would return null so you can't set properties on null. Because at the time of this statement the element doesn't exist.

<html>

<head>
  <script>
    const heading = document.querySelector("h1");
    console.log(heading); // null
  </script>
</head>

<body>
  <h1> This is heading</h1>
</body>

</html>

script tag doesn't work in head tag

That's because HTML is parsed from top to bottom. That means that when you try to get the element demo it is not yet created.

To make it work in the head tag you should add a listener that will fire when the page is fully loaded.

document.addEventListener("DOMContentLoaded", function() {
  // Here the DOM elements are loaded, and you can get them with .getElementById.
  document.getElementById("demo").innerHTML = Date();
});

Jquery Code not working when placed in head tag

I figured out what was the problem. I put the ready function after the <body> tag and now it is working perfectly.

Why script not working inside the head tag?

It does, but your script is executed before your DOM is loaded properly. Use

window.onload = function() {
    document.getElementById("demo").innerHTML = "Hello, World!";
}

Also it's possible to use the onload attribute:

<body onload="jsFunction()"></body>

script tag not working in html head or external js file

Your script needs to execute after your button is in the DOM. Your options are to place it at the bottom of the page, just before the closing body tag, or use document.ready as shown below:

//This waits until all objects are loaded in the DOM
$(document).ready(function() {
    //Then assigns the event handler
    $(".shuffle").click(function(){
      console.log("hello");
      let arr = onShuffle();
      shuffleSuccess(arr);
    });
});

If your script is in an external file $(document).ready is a good option.

Alternatively, you could use http://api.jquery.com/on/ . This will apply the click handler to anything with the class shuffle that is in the body, even if it is added later. This is arguably better than $(document).ready

$("body").on("click", ".shuffle", function() {  console.log("hello");  /*let arr = onShuffle();  shuffleSuccess(arr);*/});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><button class="shuffle">Shuffle</button>

linking extrenal javascript file inside head tag not working

Scripts can go in the head so long as the logic that tries to find elements in the DOM, happens after the DOM is loaded.

As covered by the duplicate, the usage of a document ready or a load event handler on the window allows any logic to be put in the head, without having to worry about the DOM being loaded yet, as they delay the execution of the logic until the DOM is loaded.

Thank You @taplar

html head not working properly

The problem here is that your files are not saved as/encoded as UTF-8.

As stated in comments, using a code editor (Notepad++ was suggested) open the file(s) and check its encoding.

If it isn't UTF-8, convert it to that, then save the file(s).

Reference:

https://notepad-plus-plus.org/ - Notepad++ (for Windows)

Although there are other code editors that will do the same operation.

Footnotes:

If you have any issues later on and getting an headers already sent... warning, then you will need to encode as UTF-8 without BOM.

A BOM (a.k.a. byte order mark) counts as output (before header).

Here is more on the subject:

https://en.wikipedia.org/wiki/Byte_order_mark

Script does not work when on head

I think your code doesn't work because you're not running it when document's ready:

$(document).ready(function(){

  $('#img1').mouseover(function () {
  $('#p1').show("slow");
  });

  $("#p1").hover(function () {
  $("#p1").hide("slow");
  });

  $("#img2").mouseover(function () {
  $('#p2').show("slow");
  });

  $("#p2").hover(function () {
  $("#p2").hide("slow");
  });

  $("#img3").mouseover(function () {
  $('#p3').show("slow");
  });

  $("#p3").hover(function () {
  $("#p3").hide("slow");
  });

  $("#img4").mouseover(function () {
  $('#p4').show("slow");
  });

  $("#p4").hover(function () {
  $("#p4").hide("slow");
  });

  $("#img5").mouseover(function () {
  $('#p5').show("slow");
  });

  $("#p5").hover(function () {
  $("#p5").hide("slow");
  });
});

Also you can pass two functions two your hover handler to handle both mouseover and mouseout events. I think that'll shorten your code a bit. ;)

JavaScript Code Not Work in Head Tag