2017-10-08 98 views
0

此計算器旨在接受用戶輸入以計算和報告平均溫度。我已經完成了它的大部分工作,但我遇到了一個問題,即低位數字的位數與高位不同,例如:9和10或95和110,腳本正在評估低溫高於高溫。下neath是我使用的JavaScript。不幸的是,我不能添加屏幕截圖,但輸入9和10的最高輸出響應是:平均和最低以及最高溫度 - JavaScript

請輸入低於高溫的低溫。

(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功能的錯誤,但我卡在什麼實際修改,以避免此問題。

+2

一些你的if語句比較字符串,而不是數字:'(lTemp> hTemp)' –

+0

謝謝帕特里克,我想我只是一直看着它一點點地長。嘗試轉換字符串後,我在輸出時遇到了問題。如果我使用(parseFloat(lTemp)> parseFloat(hTemp))或(parseInt(lTemp)> parseInt(hTemp))發出錯誤消息,但它也不會記錄用戶輸入或進行比較。那裏的任何指導? – 3R4BB1T

回答

0

這裏有一些想法。我無法在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 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'); 
} 
+1

謝謝Sheryl,這很有道理。我甚至從未想過在比較之前將loTemp設置爲一個單獨的變量。就「返回錯誤」問題而言,我自己並不是特別理解這些問題,但大部分代碼都是由我正在使用的教科書作者預先製作的。 – 3R4BB1T

+0

@ 3R4BB1T很高興這有幫助。我添加了一個非html版本和一個鏈接到相應的repl,你可以玩,看看它是如何工作的。 – SherylHohman

+0

@ 3R4BB1T repl.it版本還糾正了我粘貼的第一個版本中的幾個拼寫錯誤。 – SherylHohman