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

这永远不会成立，因为存储在元素的值属性中的值始终是字符串。

解决问题 2：

如果输入是数字的字符串版本，您可以通过多种方式检查，其中一种方法是测试字符串是否不是 NaN：

if (!isNaN(input))

由于执行此检查的方法有很多，我会四处寻找适合您的用例的方法。

Answer 2

innerHTML 和 value 是 "magic" 属性与 getter 和 setter。您无法直接引用它们。您可以存储不会更新的当前值，或者您可以存储节点以使用它们的魔法属性。

输入值始终是字符串。您必须使用一元运算符 + 将其转换为数字，然后使用 Number.isNaN().

测试结果

JS - typeof 不适用于输入 | document.getElementById 问题

JS - typeof doesn't work with input | document.getElementById issue

javascript

document

typeof

getelementbyid

let