HTML get input from textarea and pass it to my Javascript function

Question

I want to get user-input from text-area and pass it to my Javascript function with the following code but can't make it work. Could anybody help me with this?

<!DOCTYPE html>

<head>
    <title>Testing</title>
    <script type="text/javascript">
    function MyFunc(UserCode.value) {
        var syntax = esprima.parse(UserCode.value);
        document.getElementById("demo").innerHTML = JSON.stringify(syntax);
    }
    </script>
    <script src="esprima.js"></script>
    <script src="parse.js"></script>
</head>

<body>
    <label>Please enter your code:</label>
    <br>
    <textarea rows="4" cols="50" id="UserCode">
var answer = 6 * 7;
    </textarea>

    <br>
    <button type="button" onclick="MyFunc(UserCode.value)">Convert</button>
    <p id="demo">Result</p>
</body>

</html>

Alex Yuly · Accepted Answer · 2014-03-09 23:37:42Z

1

First of all, you are trying to access your textarea element incorrectly. You must use document.getElementById, like so:

<button type="button" onclick="MyFunc(document.getElementById('UserCode').value)">Convert</button>

Second, you are defining your function incorrectly. Your function should look something like this:

function MyFunc(text) {
    var syntax = esprima.parse(text);
    document.getElementById("demo").innerHTML = JSON.stringify(syntax);
}

answered Mar 9, 2014 at 23:37

Alex Yuly

1801 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oscar Paz · Accepted Answer · 2014-03-09 23:34:26Z

0

UserCode is not defined in your code. Creating an element with an id does not make a javascript variable with that name magically. You've got to get a reference to the element the same way you do with the demo paragraph:

<!DOCTYPE html>

<head>
    <title>Testing</title>
    <script type="text/javascript">
    function MyFunc(textAreaId) {
        var value = document.getElementbyId(textAreaId).value;
        var syntax = esprima.parse(value);
        document.getElementById("demo").innerHTML = JSON.stringify(syntax);
    }
    </script>
    <script src="esprima.js"></script>
    <script src="parse.js"></script>
</head>

<body>
    <label>Please enter your code:</label>
    <br>
    <textarea rows="4" cols="50" id="UserCode">
var answer = 6 * 7;
    </textarea>

    <br>
    <button type="button" onclick="MyFunc('UserCode')">Convert</button>
    <p id="demo">Result</p>
</body>

</html>

answered Mar 9, 2014 at 23:34

Oscar Paz

18.3k3 gold badges30 silver badges43 bronze badges

1 Comment

user2671513 Over a year ago

Thanks a lot!! I really like this one but somehow not working in my machine

Brynner Ferreira · Accepted Answer · 2014-03-10 00:31:09Z

0

Example: http://jsfiddle.net/3ackg/

JS:

$("#convert").click(function() {
    var code = $('#code').val();
    //var code = esprima.parse(code);
    var result = JSON.stringify(code);
    $('#result').html(result);
});

HTML:

<textarea rows="4" cols="50" id="code">var answer = 6 * 7;</textarea>
<button type="button" id="convert">Convert</button>
<p id="result">Result</p>

answered Mar 10, 2014 at 0:31

Brynner Ferreira

1,5761 gold badge21 silver badges21 bronze badges

Collectives™ on Stack Overflow

HTML get input from textarea and pass it to my Javascript function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related