Javascript 文件在链接到 Html 文件时不起作用
[英]Javascript file not working when linked to Html File
问题描述
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?
我是 Js 的初学者，我通过一些教程尝试了这段代码。它不起作用，我不知道问题出在哪里？ When embedding JavaScript in an HTML document, where is the proper place to put the tags and included JavaScript?在 HTML 文档中嵌入 JavaScript 时，放置标签和包含 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).我似乎记得您不应该将这些放在该部分中，但是放在该部分的开头也很糟糕，因为在页面完全呈现之前必须解析 JavaScript（或类似的东西）。 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>
1 个解决方案
解决方案1
0 已采纳 2021-01-19 06:51:15
You have errors in the layout and you are using javascript code examples from a library jquery that you haven't included.您在布局中有错误，并且您正在使用库 jquery 中未包含的 javascript 代码示例。 Also your HTML file itself was incorrect and missing body definitions.此外，您的 HTML 文件本身不正确并且缺少正文定义。
I would recommend you have a look at w3 schools and their tutorials: https://www.w3schools.com/html/html_intro.asp我建议您看看 w3 学校及其教程： 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).这是纠正了这些问题的代码（更改脚本和 css 文件的名称以使用此工具）。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.