Search code examples
javascriptjqueryhtmlcodemirror

parseInt returns Not a Number (NaN)

I made an IDE (with <textarea> and CodeMirror), which looks like this:

enter image description here

And on the left, there is a div containing the lines counter.
So what I'm trying to do is to get the last line number (12 in the picture above).

This is my code: 

$(document).ready(function() {    
    $(document).keydown(function() {
        let element = document.getElementsByClassName("CodeMirror-linenumber");
        element = element.item(element.length - 1);
        escape(element);
        let num = "";
        num = parseInt(element);
        console.log(num);
    });
});
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="array.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/xml/xml.min.js"></script>
    </head>
    <body>
        <textarea id="editor"></textarea>
        <script>
            var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), {
                  mode: "xml",
                  htmlMode: true,
                  lineNumbers: true
            });
        </script>
    </body>
</html>


The problem is that when I run it on Chrome, it gives me an output "NaN".

enter image description here
I know that this question is already asked, but I didn't find a satisfactory answer.

Solution

  • There is no reason for you to use escape(element). In fact, it is deprecated anyway. What you're doing is simply encoding the element into some kind of hexadecimal string, which you do not want.

    What you want is to simply access the innerText property of the element, and use either parseInt(element.innerText) or even better, the unary plus operator, +element.innerText to get the line number:

    $(document).ready(function() {    
    $(document).keydown(function() {
        let element = document.getElementsByClassName("CodeMirror-linenumber");
        element = element.item(element.length - 1);
        console.log(+element.innerText);
    });
});
    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="array.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/xml/xml.min.js"></script>
    </head>
    <body>
        <textarea id="editor"></textarea>
        <script>
            var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), {
                  mode: "xml",
                  htmlMode: true,
                  lineNumbers: true
            });
        </script>
    </body>
</html>