平均温度、最低温度和最高温度-JavaScript

Question

此计算器旨在接受用户输入，用于计算和报告平均温度。我已经完成了大部分，但我遇到了一个问题，即低温度的位数与高温度的位数不同，例如：9和10或95和110，脚本对低温度的评估高于对高温度的评估。下面是我正在使用的javascript。不幸的是，我还不能添加屏幕截图，但输入低9和高10时的输出响应是：

请输入一个低于高温的低温。

(function(){
var temperatures = [];
var lowest = 150;
var highest = 0;
var lowestDate;
var highestDate;
var lAverage = 0;
var hAverage = 0;
var table = $('table');
function addTemps() {
'use strict';
var table = "<table><tr><th style='width:110px'>Date</th><th>Low Temperature</th><th>High Temperature</th></tr>";
var lTemp = $('lTemp').value;
var hTemp = $('hTemp').value;
if (((parseFloat(lTemp) != parseInt(lTemp, 10)) || isNaN(lTemp) ||
(parseFloat(hTemp) != parseInt(hTemp, 10)) || isNaN(hTemp)) ||
(lTemp > 150) || (hTemp < 0) || (lTemp>hTemp)) {
if ((parseFloat(lTemp) != parseInt(lTemp, 10)) || isNaN(lTemp)){
table += '<tr><td colspan="3">Please enter a number for low temperature.</td></tr></table>';
}
if ((parseFloat(hTemp) != parseInt(hTemp, 10)) || isNaN(hTemp)){
table += '<tr><td colspan="3">Please enter a number for high temperature.</td></tr></table>';           
}
if ((lTemp > 150) || (hTemp < 0)) {
table += '<tr><td colspan="3">Please enter a number below 150 for low, or a number greater than 0 for high temperature.</td></tr></table>';
} 
if (lTemp>hTemp) {
table += '<tr><td colspan="3">Please enter a low temperature less than the high temperature.</td></tr></table>';            
}
$('output').innerHTML = table;          
}
else {
lTemp = parseInt(lTemp);
hTemp = parseInt(hTemp);
var newDate = new Date((new Date().getTime())-(temperatures.length * 86400000));
temperatures.push([newDate,lTemp,hTemp]);
table = createTable(table);
$('output').innerHTML = table;          
}
return false;
}
function init() {
'use strict';
$('theForm').onsubmit = addTemps;
}
function createTable(tbl){
lAverage=0; hAverage=0;
for (var i = 0; i<temperatures.length; i++) {
var date = ''+(temperatures[i][0].getMonth()+1)+"/"+temperatures[i][0].getDate()+"/"+temperatures[i][0].getFullYear();
var low = temperatures[i][1];
var high = temperatures[i][2];
tbl += '<tr><td>'+date+'</td><td style="text-align: right">'+low+'</td><td style="text-align: right">'+high+'</td></tr>';
if (low < lowest){
lowest = low;
lowestDate = date;
} 
if (high > highest){
highest = high;
highestDate = date; 
}
lAverage+=temperatures[i][1];
hAverage+=temperatures[i][2];
}
lAverage=(lAverage/temperatures.length).toFixed(1);
hAverage=(hAverage/temperatures.length).toFixed(1);
tbl+='<tr class="summaryRow"><td>Averages</td><td style="text-align: right">'+lAverage+'</td><td style="text-align: right">'+hAverage+'</td></tr>';
tbl+='<tr class="summaryRow"><td colspan="3">The lowest temperature of '+lowest+' occured on '+lowestDate+'.</tr>';
tbl+='<tr class="summaryRow"><td colspan="3">The highest temperature of '+highest+' occured on '+highestDate+'.</tr>';
tbl+='</table>';
return tbl;
}
function $(elementID){ 
if (typeof(elementID) == 'string') { 
return document.getElementById(elementID);
}
}
window.onload = init;
})();

我假设这是使用parseFloat或parseInt的addTemps函数中的一个错误，但我一直在考虑如何实际修改以避免这个问题。

Answer 1

以下是一些想法。我无法在repl.it中测试这段代码，所以它可能有一些粗糙的边缘
如果我正确理解了这个代码应该做什么..

两个主要问题是：

1. 您在多个位置将字符串与数字进行比较
2. 您的addTemps()函数总是返回false——这是正确的吗
   
   我实际上不记得onSubmit是如何工作的，因为我已经很久没有使用JQuery或表单了
   如果我混淆了addTemps中的返回值，请适当调整
3. 技术上没有错，但您可以使用"方便变量"来缓存计算/转换。它们在JS中本质上是"免费的"。这可以使代码更容易阅读，并且编译器不必不断重复执行相同的计算

(function(){
// could avoid "magic numbers" in code with:
var min_valid_hiTemp = 0;
var max_valid_loTemp = 150;
// initialize vars
var temperatures = [];
var lowest  = 150;    // max_valid_loTemp;
var highest = 0;      // min_valid_hiTemp;
var lowestDate  = '';
var highestDate = '';
var lAverage = 0;
var hAverage = 0;
var table = $('table');
function addTemps() {
'use strict';
var table = "<table><tr><th style='width:110px'>Date</th><th>Low Temperature</th><th>High Temperature</th></tr>";
var lTemp = $('lTemp').value;
var hTemp = $('hTemp').value;
// convenience variables
loTemp_float = parseFloat(lTemp);
loTemp_int   = parseInt(lTemp, 10);
hiTemp_float = parseFloat(hTemp);
hiTemp_int   = parseInt(hTemp, 10);
loTemp_isNAN = isNaN(lTemp);
hiTemp_isNAN = isNaN(hTemp);

// print error message if input was invalid
if ( (loTemp_float != loTemp_int) ||
(hiTemp_float != hiTemp_int) ||
loTemp_inNaN || hiTemp_isNan ||
(loTemp_int > hiTemp_int) ||
(loTemp_int > 150) || 
(hiTemp_int < 0)
){
if ((loTemp_float != loTemp_int) || loTemp_isNAN){
table += '<tr><td colspan="3">Please enter a number for low temperature.</td></tr></table>';
}
if ((hiTemp_float != hiTemp_int) || hiTemp_isNAN){
table += '<tr><td colspan="3">Please enter a number for high temperature.</td></tr></table>';           
}
// uses "magic numbers"
if ((loTemp_int > 150) || (hiTemp_int < 0)) {
table += '<tr><td colspan="3">Please enter a number below 150 for low, or a number greater than 0 for high temperature.</td></tr></table>';
} 
if (loTemp_int > hiTemp_int) {
table += '<tr><td colspan="3">Please enter a low temperature less than the high temperature.</td></tr></table>';            
}
// don't call createTable() ?  
$('output').innerHTML = table;  
// shouldn't this block return false? - To not submit the form
return false
}
// input is valid: store the temperature data
else {
// not necessary now - we already have variables with this info: loTemp_int, hiTemp_int
// lTemp = parseInt(lTemp);
// hTemp = parseInt(hTemp);
//  curious how the number of stored temps is related to the date..? 
var newDate = new Date((new Date().getTime())-(temperatures.length * 86400000));
// just use the variables we already have
//temperatures.push([newDate, lTemp, hTemp]);
temperatures.push([newDate, loTemp_int, hiTemp_int]);
table = createTable(table);
$('output').innerHTML = table; 
// shouldn't this block return true? - To submit the form
return true
}
// ?? No matter what, return false?
// I suspect you want to return false if input was invalid, and true if it was valid.
// if so, the return values should be inside the "if" and the "else" blocks.
// Not outside both blocks, as it is here.
//return false;
}
function init() {
'use strict';
$('theForm').onsubmit = addTemps;
}
function createTable(tbl){
lAverage=0; 
hAverage=0;
for (var i = 0; i<temperatures.length; i++) {
var date = ''+(temperatures[i][0].getMonth()+1)+"/"+temperatures[i][0].getDate()+"/"+temperatures[i][0].getFullYear();
var low  = temperatures[i][1];
var high = temperatures[i][2];
tbl += '<tr><td>'+date+'</td><td style="text-align: right">'+low+'</td><td style="text-align: right">'+high+'</td></tr>';
if (low < lowest){
lowest = low;
lowestDate = date;
} 
if (high > highest){
highest = high;
highestDate = date; 
}
// you already have variables "low" and "high" - may as well use them
// lAverage+=temperatures[i][1];
// hAverage+=temperatures[i][2];
lAverage += low;
hAverage += high;
}
lAverage=(lAverage/temperatures.length).toFixed(1);
hAverage=(hAverage/temperatures.length).toFixed(1);
tbl+='<tr class="summaryRow"><td>Averages</td><td style="text-align: right">'+lAverage+'</td><td style="text-align: right">'+hAverage+'</td></tr>';
tbl+='<tr class="summaryRow"><td colspan="3">The lowest temperature of '+lowest+' occured on '+lowestDate+'.</tr>';
tbl+='<tr class="summaryRow"><td colspan="3">The highest temperature of '+highest+' occured on '+highestDate+'.</tr>';
tbl+='</table>';
return tbl;
}
function $(elementID){ 
if (typeof(elementID) == 'string') { 
return document.getElementById(elementID);
}
}
window.onload = init;
})();

我实际上不记得onSubmit是如何工作的，因为我已经很久没有使用JQuery或表单了
如果我混淆了addTemps中的返回值，请适当调整

---

这是一个repl版本，它还纠正了上面代码中存在的几个拼写错误
注意：在用y以外的内容回复"添加另一个临时"提示之前，不会出现任何"打印"语句所以这部分功能并不完美，但你可以看到逻辑的主要症结已经得到了正确的解决。

// could avoid "magic numbers" in code with:
var min_valid_hiTemp = 0;
var max_valid_loTemp = 150;
// initialize vars
var temperatures = [];
var lowest  = 150;    // max_valid_loTemp;
var highest = 0;      // min_valid_hiTemp;
var lowestDate  = '';
var highestDate = '';
var lAverage = 0;
var hAverage = 0;
// var table = $('table');
// non html version
var table = 'tablen';
function addTemps() {
'use strict';
var table = 'Date' + '        ' + 'Low Temperature' + '         ' + 'High Temperature' + 'n';
// var lTemp = $('lTemp').value;
// var hTemp = $('hTemp').value;
// non html version:
var lTemp = prompt('enter low temp');
var hTemp = prompt('enter high temp');
// convenience variables
var loTemp_float = parseFloat(lTemp);
var loTemp_int   = parseInt(lTemp, 10);
var hiTemp_float = parseFloat(hTemp);
var hiTemp_int   = parseInt(hTemp, 10);
var loTemp_isNAN = isNaN(lTemp);
var hiTemp_isNAN = isNaN(hTemp);

// print error message if input was invalid
if ( (loTemp_float != loTemp_int) ||
(hiTemp_float != hiTemp_int) ||
loTemp_isNAN || hiTemp_isNAN ||
(loTemp_int > hiTemp_int) ||
(loTemp_int > 150) || 
(hiTemp_int < 0)
){
if ((loTemp_float != loTemp_int) || loTemp_isNAN){
table += 'Please enter a number for low temperature.' + 'n';
}
if ((hiTemp_float != hiTemp_int) || hiTemp_isNAN){
table += 'Please enter a number for high temperature.' + 'n';           
}
// uses "magic numbers"
if ((loTemp_int > 150) || (hiTemp_int < 0)) {
table += 'Please enter a number below 150 for low, or a number greater than 0 for high temperature.' + 'n';
} 
if (loTemp_int > hiTemp_int) {
table += 'Please enter a low temperature less than the high temperature.' + 'n';            
}
// does't call createTable() ?  
// $('output').innerHTML = table;
// without html:
console.log(table);
console.log();
// shouldn't this block return false? - To not submit the form
return false
}
// input is valid: store the temperature data
else {
//  curious how the number of stored temps is related to the date..? 
var newDate = new Date((new Date().getTime()) - (temperatures.length * 86400000));
temperatures.push([newDate, loTemp_int, hiTemp_int]);
table = createTable(table);
//$('output').innerHTML = table; 
// non html version
console.log(table);
console.log();
// shouldn't this block return true? - To submit the form
return true
}
// ?? No matter what, return false?
// I suspect you want to return false if input was invalid, and true if it was valid.
// if so, the return values should be inside the "if" and the "else" blocks.
// Not outside both blocks, as it is here.
//return false;
}
function init() {
'use strict';
//$('theForm').onsubmit = addTemps;
// non html / jquery version
if (addTemps()){
console.log("submitted");
}
else {
console.log('not submitted');
}
}
function createTable(tbl){
lAverage=0; 
hAverage=0;
for (var i = 0; i< temperatures.length; i++) {
var date = '' + (temperatures[i][0].getMonth()+1) + 
"/" + temperatures[i][0].getDate() + 
"/" + temperatures[i][0].getFullYear();
var low  = temperatures[i][1];
var high = temperatures[i][2];

tbl += date + 't' + low + 'ttt' + high + 'n';
if (low < lowest){
lowest = low;
lowestDate = date;
} 
if (high > highest){
highest = high;
highestDate = date; 
}
lAverage += low;
hAverage += high;
}
lAverage = (lAverage/temperatures.length).toFixed(1);
hAverage = (hAverage/temperatures.length).toFixed(1);
tbl += 'Averages' + 't' + lAverage + ' low, ' + 'tt' + hAverage + ' high' + 'n';
tbl += 'The lowest temperature of  ' + lowest   + ' occured on ' + lowestDate +'.n';
tbl += 'The highest temperature of ' + highest  + ' occured on ' + highestDate+'.n';
tbl += 'n';
return tbl;
}

// window.onload = init;
var addAnother = 'y'
while (addAnother == 'y') {
init();
addAnother = prompt('press "y" to add another');
}