這裏有一些想法。我無法在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