这里有一些想法。我无法在repl.it中测试此代码,所以它可能有一些粗糙的边缘。
如果我正确理解这段代码是应该做的..
两个主要问题是:
- 你在几个位置比较字符串到数字。
- 您的
addTemps()
函数总是返回false
- 这是正确的吗?
我实际上不记得onSubmit是如何工作的,因为我没有在年龄中使用JQuery或表单。
适当调整addTemps
的返回值,如果我把那部分弄混了。
- 技术上并非错误,但您可以使用“便利变量”来缓存计算/转换。他们在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 version,也校正中存在的上述代码几个错别字。
注意:除非您回复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 = 'table\n';
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 + '\t\t\t' + 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, ' + '\t\t' + 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');
}
一些你的if语句比较字符串,而不是数字:'(lTemp> hTemp)' –
谢谢帕特里克,我想我只是一直看着它一点点地长。尝试转换字符串后,我在输出时遇到了问题。如果我使用(parseFloat(lTemp)> parseFloat(hTemp))或(parseInt(lTemp)> parseInt(hTemp))发出错误消息,但它也不会记录用户输入或进行比较。那里的任何指导? – 3R4BB1T