How to send the contents of a text area to a function in Typescript / Javascript / Html

Question

Probably a very simple question, but I can't seem to find a way of sending a piece of data from a textarea to a javascript/typescript function.

HTML

  <div  data-options="dxContent : { targetPlaceholder: 'content' } " >
        <p> use this page to log errors</p>
        <p id="prevErrors" style="font-style:italic">PreviousErrors</p>
        <br />
        <div id="curError" data-bind="dxTextArea: { }"></div>
        <br />
        <div  data-bind="dxButton: { text: 'Save and return to main menu' }" onclick="    saveMyData(document.getElementById(curError).innerText)"></div>
    </div>

Java/TypeScript

<script>


        function saveMyData(curError) {
            //this will be where data is saved or emailed
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth() + 1; //January is 0!
            var yyyy = today.getFullYear();
            var h = today.getHours(); 
            var m = today.getMinutes(); 
            var s = today.getSeconds();
            if (dd < 10) {
                dd = '0' + dd
            }
            if (h < 10) {
                h = "0" + h;
            }
            if (s < 10)
            {
                s = "0"+s;
            }
            if (m < 10) {
                m = "0"+m;
            }
            if (mm < 10) {
                mm = '0' + mm
            }

            today = dd + '/' + mm + '/' + yyyy +" , "+h+":"+m+":"+s;
            prevErrors.innerText +=  "\n "+today+", "+curError;
        }
    </script>

Having only recently found out that typescript and javascript are virtually identical anyway, I feel slightly embarrassed that starting up typescript has been such a battle - nothing like c#/vb/etc.

QUESTION

I have been trying to send data from this dxtextArea control to a function. as you can see, I have already tried using the innerText , however, this seems to send nothing into the function (getting the error:

'Uncaught TypeError: Cannot read property 'innerText' of null', line 1, file 'http://localhost:51828/index.html#'.

even when data is present in the textArea.

Anyone come across this issue/know how to solve it/ or is it just my stupidity and naivety in knowledge of Java/typescript?

EDIT

I have been told to change my Method call from innerText to value (and add quotes around the ID), but this still hasn't solved the issue:

saveMyData(document.getElementById('curError').value)"

EDIT 2 My Full Script:

<div data-options="dxView : { name: 'ErrorLogging', title: 'ErrorLogging' } " >
    <div  data-options="dxContent : { targetPlaceholder: 'content' } " >
        <p>Use this page to log errors</p>
        <br />
        <p style="font-style:italic">PreviousErrors</p>
        <p id="prevErrors" style="font-style:italic"></p>
        <br />
        <div id="curError" data-bind="dxTextArea: { }" ></div>
        <br />
        <div  data-bind="dxButton: { text: 'Save and return to main menu' }" onclick="saveMyData(document.getElementById('curError').textContent)"></div>
    </div>
</div>
<script>

    function saveMyData(elem) {
        //this will be where data is saved or emailed


        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1; //January is 0!
        var yyyy = today.getFullYear();
        var h = today.getHours(); 
        var m = today.getMinutes(); 
        var s = today.getSeconds();

        //add a '0' in front of single digit values
        if (dd < 10) {
            dd = '0' + dd
        }
        if (h < 10) {
            h = "0" + h;
        }
        if (s < 10)
        {
            s = "0"+s;
        }
        if (m < 10) {
            m = "0"+m;
        }
        if (mm < 10) {
            mm = '0' + mm
        }

        if (elem.textContent) {
            var curError = elem.textContent ?
                elem.textContent :
                elem.innerText;
        }
        alert(curError);

        today = dd + '/' + mm + '/' + yyyy +" , "+h+":"+m+":"+s; //created string containing todays' date and time
        prevErrors.innerText += "\n " + today + ", " + elem;

    }
</script>

Answer 1

I found that by using

var val = $("#textArea").dxTextArea("instance").option("value");

Allowed me to get the ID called textArea , which could then be used without the method/function call.

So now, I could use the code:

prevErrors.innerText += "\n " + today + ", " + val;

to be able to get the dxTextArea's input into the data.

Problem solved! :)

Answer 2

There are a few things to check.

Number 1 - you have to ensure that the function saveMyData is declared before it is used. You will know if you haven't done this as you'll get an error such as:

ReferenceError: saveMyData is not defined

Number 2 - innerText is notoriously tricky, but the standard textContent is usually a better bet in modern browsers.

document.getElementById('curError').textContent

Note - textContent is IE9 and above (and pretty much all other browsers). To get below IE9 support, you'll need to test the feature!

If you passed the element, you could do the test inside the function, here is a working version that you can run:

 function saveMyData(elem) { if (elem.textContent) { var curError = elem.textContent ? elem.textContent : elem.innerText; } alert(curError); } 

  <div data-options="dxContent : { targetPlaceholder: 'content' } " > <p> use this page to log errors</p> <p id="prevErrors" style="font-style:italic">PreviousErrors</p> <br /> <div id="curError" data-bind="dxTextArea: { }">Test Text</div> <br /> <div data-bind="dxButton: { text: 'Save and return to main menu' }" onclick="saveMyData(document.getElementById('curError'));">Click Me</div> </div>