Javascript file not working when linked to Html File

Question

I am beginner in Js ,I tried this code by some tutorials .It is not working and I don't know what and where problem is? When embedding JavaScript in an HTML document, where is the proper place to put the tags and included JavaScript? I seem to recall that you are not supposed to place these in the section, but placing at the beginning of the section is bad, too, since the JavaScript will have to be parsed before the page is rendered completely (or something like that). This seems to leave the end of the section as a logical place for tags.

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";
  }
}

$(document).on('keypress', function(e) {
  if (e.which == 13) {
    showResponse();
  }
})

$("#ans").focus();

this is Css code

@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="1.css">
</head>
<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/>
    <script type="text/javascript" src="1.js" async></script>
  </div>
</div>

</html>

Nickolas Kwiatkowski Nickolas Kwiatkowski · Accepted Answer · 2021-01-19T06:51:15

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>

Javascript file not working when linked to Html File

1 Answers