JS - typeof不適用於輸入| document.getElementById問題

我需要尋求幫助來解決兩個問題。JS - typeof不適用於輸入| document.getElementById問題

document.getElementById.value保存在let不保存在不同的letinnerHTML工作。我看到一些類似的線索，但他們沒有幫助我。
當我需要檢查數字typeof時，出現了一個問題，它只是運行，因爲JS沒有看到它。

這是我的代碼。感謝您的任何建議和幫助。

function wage() { 
 
    let input = document.getElementById('annualInput').value; 
 
    let output = document.getElementById('resultMonthly').innerHTML; 
 
    
 
    // it doesn't work, but it works with pure document.getElementById('result').innerHTML = input; 
 
    output = input; 
 
    
 
    /* 
 
     if (input !== '') { 
 
      // this if doesn't work even with string and number 
 
      if (typeof input == 'number') 
 
       document.getElementById('result').innerHTML = input; 
 
     } else { 
 
      document.getElementById('result').innerHTML = 'Please, type your annual wage'; 
 
     } 
 
    */ 
 

 
    // annual wage devided by 12 months 
 
    let resultMonthly = input/12; 
 
    let showMonthly = 'Your monthly wage: ' + resultMonthly.toFixed(2); 
 
    
 
    // monthly wage devided by 20 days 
 
    let resultDaily = resultMonthly/20; 
 
    let showDaily = 'Your daily wage: ' + resultDaily.toFixed(2); 
 
    
 
    // daily wage devided by 8 hours 
 
    let resultHourly = resultDaily/8; 
 
    let showHourly = 'Your hourly wage: ' + resultHourly.toFixed(2); 
 
    
 
    if (input !== '') { 
 
     document.getElementById('resultMonthly').innerHTML = showMonthly + ' $'; 
 
     document.getElementById('resultDaily').innerHTML = showDaily + ' $'; 
 
     document.getElementById('resultHourly').innerHTML = showHourly + ' $'; 
 
    } else { 
 
     document.getElementById('resultMonthly').innerHTML = 'Please, type your annual wage'; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Wage App</title> 
 
    <meta charset="utf-8"> 
 
    <title>Issue App</title> 
 
    <link rel="stylesheet" type="text/css" href="wageup.css"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <div class="jumbotron">    
 
      <!-- the title and desc --> 
 
      <h1 class="display-4 text-center">WageApp</h1> 
 
      <p class="h6 text-center" id="paragraphTitle"> 
 
       This is a simple App for calculating wage by year, month, day and hour 
 
      </p> 
 
      <hr class="my-4"> 
 

 
      <!-- input-form --> 
 
      <form> 
 
       <div class="form-group"> 
 
        <label for="annualInput">Your annual wage</label> 
 
        <input type="annualData" class="form-control" id="annualInput" aria-describedby="hep" placeholder="Annual wage in $"> 
 
        <small id="help" class="form-text text-muted">We'll never share your wage with anyone else.</small> 
 
       </div> 
 
       <button onclick="wage()" type="button" class="btn btn-primary btn-sm" id="checkButton">Check</button> 
 
      </form> 
 
     </div> 
 
     <div class="alert alert-success" role="alert" id="resultMonthly"></div> 
 
     <div class="alert alert-info" role="alert" id="resultDaily"></div> 
 
     <div class="alert alert-warning" role="alert" id="resultHourly"></div> 
 
    </div> 
 
    
 
    <!-- JS --> 
 
    <script type="text/javascript" src="wageUp.js"> 
 
    <!-- Jquery --> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
    <!-- Bootstrap --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</body> 
 
</html>

來源

2017-10-05 Adam

什麼是'type =「annualData」'？和一個文本框的類型將是一個字符串，它不會是一個數字。 – epascarello

正常輸入元素的值是字符串類型 – user2520818

問題1：

output = input;

這不起作用，因爲output未引用的元素，它是存儲該元素的innerHTML。

解決問題1：

您的評論是一個良好的開端：

document.getElementById('result').innerHTML = input;

或者，您也可以將元素存儲到一個變量，然後設置的innerHTML：

var result = document.getElementById('result'); 
// later on 
result.innerHTML = input;

問題2：

if (typeof input == 'number')

因爲存儲在一個元素的值屬性的值總是字符串這不會是真的。

解決問題2：

您可以通過多種方式檢查輸入是一個數字的字符串版本，一個這樣的方式是測試如果字符串不是楠：

if (!isNaN(input))

由於有很多方法可以執行此檢查，因此我會環顧四周以找到適合您的用例的方法。

來源

2017-10-05 14:51:46 KevBot

感謝您的快速響應。我對你的解決問題2有一個問題。如果（！isNaN（輸入））改變了你的if，但它仍然接受字符串。我怎樣才能改變這一點：if（typeof input =='number'）只接受數字？ – Adam

使用'input = + input'將字符串轉換爲數字。如果他不能，它會是'NaN' – Kulvar

@Adam，這取決於用戶是否可以使用逗號（例如：'1,234.12'）？因爲如果可以的話，不要試圖強制（'+'1,234''是NaN）。 – KevBot

innerHTML和value是一個「吸血鬼」屬性與吸氣劑和二傳手。你不能直接引用它們。您可以存儲不會更新的當前值，也可以存儲節點以使用其魔術屬性。

輸入值總是字符串。您必須使用一元運算符+將其轉換爲數字，然後使用Number.isNaN()來測試結果。

來源

2017-10-05 14:55:34 Kulvar

JS - typeof不適用於輸入| document.getElementById問題

回答

相關問題