How to Link a JavaScript File to a HTML File

How do I link a JavaScript file to a HTML file?

First you need to download JQuery library from http://jquery.com/ then
load the jquery library the following way within your html head tags

then you can test whether the jquery is working by coding your jquery code after the jquery loading script

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
   $(function(){
      alert("My First Jquery Test");
   });
</script>

</head>
<body><!-- Your web--></body>
</html>

If you want to use your jquery scripts file seperately you must define the external .js file this way after the jquery library loading.

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>

Test in real time

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
<!--LINK JQUERY--><script type="text/javascript" src="jquery-3.3.1.js"></script><!--PERSONAL SCRIPT JavaScript--><script type="text/javascript">   $(function(){      alert("My First Jquery Test");   });</script>
</head><body><!-- Your web--></body></html>

linking JavaScript to HTML file

Add like following not with link.

<script type="text/javascript" src="jsfile.js"></script>

How to link JS from an extern file in HTML

You can either load an external js file or write your code inside the script tags.
Try:

<body>
    <header>
        <div class="container">
            <h1><a href="/">Title</a></h1>
            <span id="tagline"></span>
        </div>
    </header>
    <script src="js/tagline.js"></script>
    <script>showTagline();</script>
</body>

Place your script tags at the end of the body. You are using the id to access the span, the placement of the function call does not matter.

Javascript file not working when linked to Html File

You have errors in the layout and you are using javascript code examples from a library jquery that you haven't included. Also your HTML file itself was incorrect and missing body definitions.

I would recommend you have a look at w3 schools and their tutorials: https://www.w3schools.com/html/html_intro.asp

Good practice is to look at online resources first before posting here.

This is your code with those issues corrected (changes the names of the script and css files to work with this tool). You also have formatting and spelling errors that you need to look at.

var questions = [
  'Whats your name ?',
  'Where are you from?',
  'What\'s your age?',
  'What profile you are working on?',
  'It was nice talking you :)'
];
var num = 0;

var inputBox = document.querySelector("#ans"); //
var output = document.querySelector("#result"); //
output.innerHTML = questions[num];

function showResponse() {
  var input = inputBox.value;
  if (inputBox.value == "") {

  } else {
    if (num == 0) {
      output.innerHTML = `Hii ${input}`;
      inputBox.value = "";
      inputBox.setAttribute("placeholder", "Wait for 2 secs");
      ++num;
      setTimeout(changeQuestion, 2000);
    } else if (num == 1) {
      output.innerHTML = `${input} must be a good place`;
      inputBox.value = "";
      inputBox.setAttribute("placeholder", "Wait for 2 secs");
      ++num;
      setTimeout(changeQuestion, 2000);
    } else if (num == 2) {
      output.innerHTML = `So you are ${2017 - input} born`;
      inputBox.value = "";
      inputBox.setAttribute("placeholder", "Wait for 2 secs");
      ++num;
      setTimeout(changeQuestion, 2000);
    } else if (num == 3) {
      output.innerHTML = `Awesome ${input}`;
      inputBox.value = "";
      inputBox.setAttribute("placeholder", "Wait for 2 secs");
      ++num;
      setTimeout(changeQuestion, 2000);
    }
  }
}

function changeQuestion() {
  inputBox.setAttribute("placeholder", "Enter your response");
  output.innerHTML = questions[num];
  if (num == 4) {
    inputBox.style.display = "none";
  }
}

// this is jquery syntax and won't work
// $(document).on('keypress', function(e) {
//  if (e.which == 13) {
//    showResponse();
//  }
//})
document.addEventListener('keypress', function(e) {
  if (e.which == 13) {
    showResponse();
  }
})

// this is jquery syntax and won't work
//$("#ans").focus(); 
document.querySelector("#ans").focus();

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
body {
  background: #50514F;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 40px;
  font-weight: 600;
  border: 3px solid #fff;
  padding: 10px 20px;
  margin-bottom: 40px;
}

.flex {
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  height: 100vh;
}

#result {
  font-size: 36px;
  color: #fff;
}

#ans {
  color: #fff;
  padding: 20px;
  font-size: 26px;
  background: transparent;
  border: 0;
}

#ans:focus {
  outline: 0;
  outline-offset: 0;
}

<!DOCTYPE html>
<html>
<head>
  <title>Chatbot</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="script.js" async></script>
</head>
<body>
  <div class="flex">
    <div>
      <h1>Assitant</h1>
    </div>
    <div id="result">
    </div>
    <div class="input">
      <input type="text" id="ans" placeholder="Enter your response" required/>
    </div>
  </div>
</body>
</html>