为什么我的 javascript 一直引用同一个 innerHTML？
Why does my javascript keep referring to the same innerHTML?
我正在使用 javascript 和 html 构建语音助手，在我添加天气命令（最后一个 'else if'）之前，代码运行良好，但现在，每次我尝试向程序询问其他内容时，例如日期，时间，innerHTML 一直显示天气。我尝试了很多不同的东西，但仍然无济于事。为什么 innerHTML 一直显示天气而不是我的其他命令？
这是我的代码，因为它需要麦克风访问，这是网站：https://voice-assistant-development.stcollier.repl.co/。你可以自己试试看我的意思。
function record() {
var recognition = new webkitSpeechRecognition();
recognition.lang = "en-GB";
recognition.start();
recognition.onresult = function(event) {
let transcript = event.results[0][0].transcript;
var str = transcript;
//Weather Code
var input = "Detroit";
var desc = document.querySelector('#output');
fetch('https://api.openweathermap.org/data/2.5/weather?q='+input+'&units=imperial&appid=6a3b95f23e761e707120f86b0eed7d55')
.then(response => response.json())
.then(data => {
var tempValue = data['main']['temp'];
var nameValue = data['name'];
var descValue = data['weather'][0]['description'];
var humidvalue=data['main']['humidity'];
var mintemp=data['main']['temp_min'];
var maxtemp=data['main']['temp_max'];
var weather_now = "It's " + tempValue +" degrees Farenheight outsite currently, with a low of " +mintemp + " degrees Farenheight and a high of " + maxtemp + " degrees Farenheight. The humidity percentage for today is " + humidvalue + "%. The current weather is " + descValue + ".";
desc.innerHTML = weather_now;
})
//End of Weather Code
//Date Code
const d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var wkday = weekday[d.getDay()];
const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var msg_date = "It's " + wkday + ", " + months[d.getMonth()] + " " + d.getDate() + "th " + d.getFullYear() + "."
//End of Date
//Time Code
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = "It's " + hours + ':' + minutes + ' ' + ampm;
return strTime;
}
var msg_time = formatAMPM(new Date);
//End of Time
var msg_hello = ['Hello!', 'Hello, User!', 'Hi!', 'Hello! How are you doing?'];
var msg_notunderstood = ["I'm not sure what you mean.", "I don't understand. Maybe try rephrasing?", "I'm sorry, I don't understand. Please try again."]
var affirmative_msg = ['Here you go!', 'Sure thing!']
if (str.includes('hello')) {
responsiveVoice.speak(msg_hello[Math.floor(Math.random()*msg_hello.length)], 'US English Female');
} else if (str.includes('date')) {
document.getElementById('output').innerHTML = msg_date
responsiveVoice.speak(msg_date, 'US English Female')
} else if (str.includes('time')) {
document.getElementById('output').innerHTML = msg_time
responsiveVoice.speak(msg_time, 'US English Female')
} else if (str.includes('email')) {
window.open("mailto:")
} else if (str.includes('weather')) {
document.getElementById('output').innerHTML = weather_now
responsiveVoice.speak(weather_now, 'US English Female')
} else {
document.getElementById('output').innerHTML = "I don't know what you mean."
responsiveVoice.speak(msg_notunderstood[Math.floor(Math.random()*msg_notunderstood.length)], 'US English Female');
}
document.getElementById('speechToText').value = event.results[0][0].transcript;
}
}
//Mic Trigger Key
document.body.onkeyup = function(e){
if(e.keyCode == 32){
record()
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<label for="Speech Recognition">Speech Recognition</label>
<input type="text" name="" id="speechToText" placeholder="Speak Something" disabled="disabled" value="">
<button onclick="record()">Record</button>
<p id="output"></p>
<h1 class="name" id="name"></h1>
<p class="desc"></p>
<script src="https://code.responsivevoice.org/responsivevoice.js?key=x9uXdCB8"></script>
<script src="script.js"></script>
</body>
</html>
感谢您的帮助。非常感谢。
问题是天气检索提取在您的记录循环内 - 没有条件 - 所以它每次都会执行。因为获得结果需要一些时间，所以它会覆盖您的任何其他结果。我建议将它放在另一个函数中并存储变量，以便您可以在需要时获取它。如果你把它放在一个 window.onload 事件中，它会在页面加载时触发，所以当语音命令请求它时不会有延迟。
let weather_now
window.onload = function() {
fetch('https://api.openweathermap.org/data/2.5/weather?q=' + input + '&units=imperial&appid=6a3b95f23e761e707120f86b0eed7d55')
.then(response => response.json())
.then(data => {
let tempValue = data['main']['temp'];
let nameValue = data['name'];
let descValue = data['weather'][0]['description'];
let humidvalue = data['main']['humidity'];
let mintemp = data['main']['temp_min'];
let maxtemp = data['main']['temp_max'];
weather_now = "It's " + tempValue + " degrees Farenheight outsite currently, with a low of " + mintemp + " degrees Farenheight and a high of " + maxtemp + " degrees Farenheight. The humidity percentage for today is " + humidvalue + "%. The current weather is " + descValue + ".";
})
}
function record() {
var recognition = new webkitSpeechRecognition();
recognition.lang = "en-GB";
recognition.start();
recognition.onresult = function(event) {
let transcript = event.results[0][0].transcript;
var str = transcript;
//Weather Code
let input = "Detroit";
let desc = document.querySelector('#output');
//Date Code
const d = new Date();
let weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
let wkday = weekday[d.getDay()];
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var msg_date = "It's " + wkday + ", " + months[d.getMonth()] + " " + d.getDate() + "th " + d.getFullYear() + "."
//End of Date
let msg_time = formatAMPM(new Date);
//End of Time
let msg_hello = ['Hello!', 'Hello, User!', 'Hi!', 'Hello! How are you doing?'];
let msg_notunderstood = ["I'm not sure what you mean.", "I don't understand. Maybe try rephrasing?", "I'm sorry, I don't understand. Please try again."]
let affirmative_msg = ['Here you go!', 'Sure thing!']
if (str.includes('hello')) {
responsiveVoice.speak(msg_hello[Math.floor(Math.random() * msg_hello.length)], 'US English Female');
} else if (str.includes('date')) {
document.getElementById('output').innerHTML = msg_date
responsiveVoice.speak(msg_date, 'US English Female')
} else if (str.includes('time')) {
document.getElementById('output').innerHTML = msg_time
responsiveVoice.speak(msg_time, 'US English Female')
} else if (str.includes('email')) {
window.open("mailto:")
} else if (str.includes('weather')) {
document.getElementById('output').innerHTML = weather_now
responsiveVoice.speak(weather_now, 'US English Female')
} else {
document.getElementById('output').innerHTML = "I don't know what you mean."
responsiveVoice.speak(msg_notunderstood[Math.floor(Math.random() * msg_notunderstood.length)], 'US English Female');
}
document.getElementById('speechToText').value = event.results[0][0].transcript;
}
}
// Time
function formatAMPM(date) {
let hours = date.getHours();
let minutes = date.getMinutes();
let ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
let strTime = "It's " + hours + ':' + minutes + ' ' + ampm;
return strTime;
}
//Mic Trigger Key
document.body.onkeyup = function(e) {
if (e.keyCode == 32) {
record()
}
}
我目前无法在我的计算机上试用 replo，但我怀疑问题与异步代码执行有关。当你说 fetch(...).then(...) 时，你是在说“去向 OpenWeatherMap 询问数据，一旦你得到它，然后 ... 这样做。”但是，当 fetch 函数正在做它的事情时，文件的其余部分不会只是停下来等待。它继续执行以下行。我猜会发生什么情况是它通过了你以后的所有代码，解析语音并适当地响应，然后 fetch 完成并更新 div 与天气信息。也许您想在不同于助手响应的 html 元素中显示此天气数据？
我正在使用 javascript 和 html 构建语音助手，在我添加天气命令（最后一个 'else if'）之前，代码运行良好，但现在，每次我尝试向程序询问其他内容时，例如日期，时间，innerHTML 一直显示天气。我尝试了很多不同的东西，但仍然无济于事。为什么 innerHTML 一直显示天气而不是我的其他命令？
这是我的代码，因为它需要麦克风访问，这是网站：https://voice-assistant-development.stcollier.repl.co/。你可以自己试试看我的意思。
function record() {
var recognition = new webkitSpeechRecognition();
recognition.lang = "en-GB";
recognition.start();
recognition.onresult = function(event) {
let transcript = event.results[0][0].transcript;
var str = transcript;
//Weather Code
var input = "Detroit";
var desc = document.querySelector('#output');
fetch('https://api.openweathermap.org/data/2.5/weather?q='+input+'&units=imperial&appid=6a3b95f23e761e707120f86b0eed7d55')
.then(response => response.json())
.then(data => {
var tempValue = data['main']['temp'];
var nameValue = data['name'];
var descValue = data['weather'][0]['description'];
var humidvalue=data['main']['humidity'];
var mintemp=data['main']['temp_min'];
var maxtemp=data['main']['temp_max'];
var weather_now = "It's " + tempValue +" degrees Farenheight outsite currently, with a low of " +mintemp + " degrees Farenheight and a high of " + maxtemp + " degrees Farenheight. The humidity percentage for today is " + humidvalue + "%. The current weather is " + descValue + ".";
desc.innerHTML = weather_now;
})
//End of Weather Code
//Date Code
const d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var wkday = weekday[d.getDay()];
const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var msg_date = "It's " + wkday + ", " + months[d.getMonth()] + " " + d.getDate() + "th " + d.getFullYear() + "."
//End of Date
//Time Code
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = "It's " + hours + ':' + minutes + ' ' + ampm;
return strTime;
}
var msg_time = formatAMPM(new Date);
//End of Time
var msg_hello = ['Hello!', 'Hello, User!', 'Hi!', 'Hello! How are you doing?'];
var msg_notunderstood = ["I'm not sure what you mean.", "I don't understand. Maybe try rephrasing?", "I'm sorry, I don't understand. Please try again."]
var affirmative_msg = ['Here you go!', 'Sure thing!']
if (str.includes('hello')) {
responsiveVoice.speak(msg_hello[Math.floor(Math.random()*msg_hello.length)], 'US English Female');
} else if (str.includes('date')) {
document.getElementById('output').innerHTML = msg_date
responsiveVoice.speak(msg_date, 'US English Female')
} else if (str.includes('time')) {
document.getElementById('output').innerHTML = msg_time
responsiveVoice.speak(msg_time, 'US English Female')
} else if (str.includes('email')) {
window.open("mailto:")
} else if (str.includes('weather')) {
document.getElementById('output').innerHTML = weather_now
responsiveVoice.speak(weather_now, 'US English Female')
} else {
document.getElementById('output').innerHTML = "I don't know what you mean."
responsiveVoice.speak(msg_notunderstood[Math.floor(Math.random()*msg_notunderstood.length)], 'US English Female');
}
document.getElementById('speechToText').value = event.results[0][0].transcript;
}
}
//Mic Trigger Key
document.body.onkeyup = function(e){
if(e.keyCode == 32){
record()
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<label for="Speech Recognition">Speech Recognition</label>
<input type="text" name="" id="speechToText" placeholder="Speak Something" disabled="disabled" value="">
<button onclick="record()">Record</button>
<p id="output"></p>
<h1 class="name" id="name"></h1>
<p class="desc"></p>
<script src="https://code.responsivevoice.org/responsivevoice.js?key=x9uXdCB8"></script>
<script src="script.js"></script>
</body>
</html>
感谢您的帮助。非常感谢。
问题是天气检索提取在您的记录循环内 - 没有条件 - 所以它每次都会执行。因为获得结果需要一些时间，所以它会覆盖您的任何其他结果。我建议将它放在另一个函数中并存储变量，以便您可以在需要时获取它。如果你把它放在一个 window.onload 事件中，它会在页面加载时触发，所以当语音命令请求它时不会有延迟。
let weather_now
window.onload = function() {
fetch('https://api.openweathermap.org/data/2.5/weather?q=' + input + '&units=imperial&appid=6a3b95f23e761e707120f86b0eed7d55')
.then(response => response.json())
.then(data => {
let tempValue = data['main']['temp'];
let nameValue = data['name'];
let descValue = data['weather'][0]['description'];
let humidvalue = data['main']['humidity'];
let mintemp = data['main']['temp_min'];
let maxtemp = data['main']['temp_max'];
weather_now = "It's " + tempValue + " degrees Farenheight outsite currently, with a low of " + mintemp + " degrees Farenheight and a high of " + maxtemp + " degrees Farenheight. The humidity percentage for today is " + humidvalue + "%. The current weather is " + descValue + ".";
})
}
function record() {
var recognition = new webkitSpeechRecognition();
recognition.lang = "en-GB";
recognition.start();
recognition.onresult = function(event) {
let transcript = event.results[0][0].transcript;
var str = transcript;
//Weather Code
let input = "Detroit";
let desc = document.querySelector('#output');
//Date Code
const d = new Date();
let weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
let wkday = weekday[d.getDay()];
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var msg_date = "It's " + wkday + ", " + months[d.getMonth()] + " " + d.getDate() + "th " + d.getFullYear() + "."
//End of Date
let msg_time = formatAMPM(new Date);
//End of Time
let msg_hello = ['Hello!', 'Hello, User!', 'Hi!', 'Hello! How are you doing?'];
let msg_notunderstood = ["I'm not sure what you mean.", "I don't understand. Maybe try rephrasing?", "I'm sorry, I don't understand. Please try again."]
let affirmative_msg = ['Here you go!', 'Sure thing!']
if (str.includes('hello')) {
responsiveVoice.speak(msg_hello[Math.floor(Math.random() * msg_hello.length)], 'US English Female');
} else if (str.includes('date')) {
document.getElementById('output').innerHTML = msg_date
responsiveVoice.speak(msg_date, 'US English Female')
} else if (str.includes('time')) {
document.getElementById('output').innerHTML = msg_time
responsiveVoice.speak(msg_time, 'US English Female')
} else if (str.includes('email')) {
window.open("mailto:")
} else if (str.includes('weather')) {
document.getElementById('output').innerHTML = weather_now
responsiveVoice.speak(weather_now, 'US English Female')
} else {
document.getElementById('output').innerHTML = "I don't know what you mean."
responsiveVoice.speak(msg_notunderstood[Math.floor(Math.random() * msg_notunderstood.length)], 'US English Female');
}
document.getElementById('speechToText').value = event.results[0][0].transcript;
}
}
// Time
function formatAMPM(date) {
let hours = date.getHours();
let minutes = date.getMinutes();
let ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
let strTime = "It's " + hours + ':' + minutes + ' ' + ampm;
return strTime;
}
//Mic Trigger Key
document.body.onkeyup = function(e) {
if (e.keyCode == 32) {
record()
}
}
我目前无法在我的计算机上试用 replo，但我怀疑问题与异步代码执行有关。当你说 fetch(...).then(...) 时，你是在说“去向 OpenWeatherMap 询问数据，一旦你得到它，然后 ... 这样做。”但是，当 fetch 函数正在做它的事情时，文件的其余部分不会只是停下来等待。它继续执行以下行。我猜会发生什么情况是它通过了你以后的所有代码，解析语音并适当地响应，然后 fetch 完成并更新 div 与天气信息。也许您想在不同于助手响应的 html 元素中显示此天气数据？