Javascript 文件在鏈接到 Html 文件時不起作用

Question

我是 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>

Answer 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>

Javascript 文件在鏈接到 Html 文件時不起作用

問題描述

1 個解決方案

解決方案1
0 已采納 2021-01-19 06:51:15

Javascript 文件在鏈接到 Html 文件時不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2021-01-19 06:51:15

解決方案1
0 已采納 2021-01-19 06:51:15