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

时间:2017-10-05 14:48:22

标签: javascript document getelementbyid typeof let

我需要帮助解决两个问题。

    保存在document.getElementById.value中的
  1. let不能与保存在其他innerHTML中的let一起使用。我看到了一些类似的线索,但他们还没有帮助我。

  2. 当我需要通过typeof检查号码时出现问题,它只是在JS没有看到它时运行。

  3. 这是我的代码。感谢您的任何建议和帮助。

    
    
    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>
    &#13;
    &#13;
    &#13;

2 个答案:

答案 0 :(得分:2)

问题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))

由于有很多方法可以进行此检查,因此我会四处寻找适合您用例的方法。

答案 1 :(得分:1)

innerHTMLvalue是一个带有getter和setter的“魔法”属性。你无法直接引用它们。您可以存储“不会更新的当前值”,也可以存储节点以使用其魔术属性。

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