链接到 Html 文件时，Javascript 文件不起作用答案

【问题标题】：Javascript file not working when linked to Html File链接到 Html 文件时，Javascript 文件不起作用
【发布时间】：2021-04-23 10:30:03
【问题描述】：

我是 Js 的初学者，我通过一些教程尝试了这段代码。它不起作用，我不知道问题出在哪里？在 HTML 文档中嵌入 JavaScript 时，放置标签和包含 JavaScript 的合适位置在哪里？我似乎记得您不应该将它们放在该部分中，但是放置在该部分的开头也很糟糕，因为必须在页面完全呈现之前解析 JavaScript（或类似的东西）。这似乎使该部分的末尾成为标签的逻辑位置。

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>

【问题讨论】：

您是否尝试过在标题中使用脚本导入？

标签： javascript html css

【解决方案1】：

您在布局中有错误，并且您正在使用未包含的库 jquery 中的 javascript 代码示例。此外，您的 HTML 文件本身不正确且缺少正文定义。

我建议你看看 w3 学校及其教程：https://www.w3schools.com/html/html_intro.asp

良好的做法是在此处发布之前先查看在线资源。

这是纠正了这些问题的代码（更改脚本和 css 文件的名称以使用此工具）。您还需要查看格式和拼写错误。

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>

【讨论】：

Html 和 Java Script 工作正常。我想了解 javascript。它来自 Youtube 中的一个教程
运行我包含的代码 sn-p 并查看一下，您的代码没有响应的原因是使用了 $(document).on( ....，因为那是您未包含的 jquery 库语法你的应用