External javascript loads but doesn't execute

Question

So I'm trying to serve a simple web page. In my html I have a form and I'd like to simply say no results found when anything is searched for. If I place a javascript function into script tags into the html document the div gets populated. However whenever I use an external js file it isn't even executed. The console logs nothing and no alerts show up. The server is serving up these files however because if I log the request URL I see that /button_click.js is being served. Can someone explain why this happens? Here is my code for reference:

index.html

<!DOCTYPE html>

 <html>
   <head>
     <style>
        body{background: skyblue; font-family: verdana; color: #fff; padding: 30px;}
        h1{font-size: 48px; text-transform: uppercase; letter-spacing: 2px; text-align:center;}
        p{font-size: 16px; text-align:center;}
      </style>

      <script type="text/javascript" src="button_click.js">
        // if uncommented and without the src tag this seems to do the job
        // function buttonClick() {
        //   document.getElementById('result').innerHTML = "No results found";
        //   return false;
        // }
      </script>
  </head>

  <body>
    <h1> Welcome to the home page</h1>
    <form id="form" onsubmit="return buttonClick()">
      <input type="text" name="search"> <br>
      <input type="submit" name="submit"> <br>
    </form>

    <p id = "result">
    </p>
  </body>
</html>

button_click.js

function buttonClick() {
  console.log('in here');
  alert("in here");
  document.getElementById('result').innerHTML = "No results found";
  return false;
}

UPDATE

My console gives me an unexpected token for "<" error at line 1 in my js file. When I do try and check the file through the browsers resources the js file is apparently exactly the same as my index.html file. It contains no javascript and has the contents of index.html. Why is this?

All my files are in the same directory and I have checked all the file names as well.Here are the contents of my server file for reference:

server.js

const http = require('http');
const fs = require('fs');


const server = http.createServer(function(req, res) {
  res.writeHeader(200, {"Content_Type": "text/html"});
  var readStream = fs.createReadStream(__dirname + '/index.html', 'utf8');
  readStream.pipe(res);
  console.log(req.url);
  console.log('served page');
});

server.listen(3000, '127.0.0.1');
console.log('Listening in port 3000');

The content between script tags is ignored, if a src attribute is present, see developer.mozilla.org/en-US/docs/Web/HTML/Element/script — Teemu
– Teemu, Commented Mar 5, 2017 at 13:43
Surround button_click.js's content in document.onload(); and test if it works. Or put your script tag before </body> tag — Behrad Khodayar
– Behrad Khodayar, Commented Mar 5, 2017 at 13:46
The script works fine between the script tags. It is when I use a src attribute that it does not work. When I try to execute the code from between the script tags I remove the src attribute so as to not cause any conflicts and it works. — Raees Rajwani
– Raees Rajwani, Commented Mar 5, 2017 at 13:47
You can't get both, inline script and external in the same tag. Please read the documentation I've linked above. — Teemu
– Teemu, Commented Mar 5, 2017 at 13:49

trincot · Accepted Answer · 2017-03-05 16:20:43Z

1

After you added the content of server.js to your question, it becomes clear what has happened.

The callback to http.createServer is called for every request. And you actually modify the normal response like this:

var readStream = fs.createReadStream(__dirname + '/index.html', 'utf8');
readStream.pipe(res);

... which explains why your request for button_click.js results in the content of the index page coming back, giving the behaviour you describe.

So remove those two lines and it should work a lot better.

See also the nodejs documentation on this.

NB: If you want to force index.html to be returned in some situations, then perform the necessary filtering on the url before executing those lines of code.

answered Mar 5, 2017 at 16:20

trincot

357k38 gold badges282 silver badges338 bronze badges

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

Comments

Sagar V · Accepted Answer · 2017-03-05 13:56:36Z

This is you code but it is not working when function called in form.onsubmit.

function buttonClick() {
  console.log('in here');
  alert("in here");
  document.getElementById('result').innerHTML = "No results found";
  return false;
}

<!DOCTYPE html>

 <html>
   <head>
     <style>
        body{background: skyblue; font-family: verdana; color: #fff; padding: 30px;}
        h1{font-size: 48px; text-transform: uppercase; letter-spacing: 2px; text-align:center;}
        p{font-size: 16px; text-align:center;}
      </style>
 </head>

  <body>
    <h1> Welcome to the home page</h1>
    <form id="form" onsubmit="return buttonClick()">
      <input type="text" name="search"> <br>
      <input type="submit" name="submit"> <br>
    </form>

    <p id = "result">
    </p>
  </body>
</html>

This Code works when function calling from input[type=submit].

function buttonClick() {
  console.log('in here');
  alert("in here");
  document.getElementById('result').innerHTML = "No results found";
  return false;
}

<!DOCTYPE html>

 <html>
   <head>
     <style>
        body{background: skyblue; font-family: verdana; color: #fff; padding: 30px;}
        h1{font-size: 48px; text-transform: uppercase; letter-spacing: 2px; text-align:center;}
        p{font-size: 16px; text-align:center;}
      </style>
  </head>

  <body>
    <h1> Welcome to the home page</h1>
    <form id="form" >
      <input type="text" name="search"> <br>
      <input type="submit" name="submit" onclick="buttonClick();"> <br>
    </form>

    <p id = "result">
    </p>
  </body>
</html>

This doesn't work. Even when I put the javascript code inline the onclick causes the page to refresh. When I keep the javascript code in a separate file the onclick does not show any alerts or change the divs inner html

Collectives™ on Stack Overflow

External javascript loads but doesn't execute

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related