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

Question

我需要尋求幫助來解決兩個問題。

let中保存的document.getElementById.value不能與其他let保存的innerHTML一起使用。 我看到了一些類似的主題，但是它們並沒有幫助我。
當我需要按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>

Answer 1

問題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')

永遠不會如此，因為存儲在元素的value屬性中的值始終是字符串。

解決問題2：

您可以通過多種方式檢查輸入是否為數字的字符串版本，一種方法是測試字符串是否不是NaN：

if (!isNaN(input))

由於執行此檢查的方法有很多，因此我將四處尋找適合您的用例的方法。

Answer 2

innerHTML和value是具有getter和setter的“魔術”屬性。 您無法直接引用它們。 您可以存儲不會更新的當前值，也可以存儲節點以使用其魔術屬性。

輸入值始終是字符串。 您必須使用一元運算符+將其Number.isNaN()為數字，然后使用Number.isNaN()測試結果。

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

問題描述

2 個解決方案

解決方案1
2 已采納 2017-10-05 14:51:46

解決方案2
1 2017-10-05 14:55:34

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

問題描述

2 個解決方案

解決方案1 2 已采納 2017-10-05 14:51:46

解決方案2 1 2017-10-05 14:55:34

解決方案1
2 已采納 2017-10-05 14:51:46

解決方案2
1 2017-10-05 14:55:34