Add text when click on

Sunamena · May 7, 2017

This is currently my Function:

function insertText(elemID, text)
{
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}

And this is my onclick:

onclick="insertText('bericht', 'mytext');"

What it needs to do is add mytext at the END of the current text in my Textarea.

This function works, but as soon as i enter something IN the textarea, the function stops working.

Does anyone here know how to solve this issue?

dsonesuk · May 7, 2017

So everytime you click whatever, it will add 'mytext' to end of content in textarea, trouble is a teaxtarea being a form input uses value, NOT innerHTML.

dsonesuk · May 8, 2017

If you want a event to be triggered everytime something is typed within the textarea then use 'onkeyup' event instead of 'onclick.

function insertText(elemID, text)
            {
                var elem = document.getElementById(elemID);
                elem.value += text;
            }

<textarea name="textarea1" id="bericht" onkeyup="insertText('bericht', 'mytext');"></textarea>

IF you want to identify a specific key press for example 'enter' key, you have to pass event and check keycode was 13

<textarea name="textarea1" id="bericht" onkeyup="insertText('bericht', 'mytext', event);"></textarea>

function insertText(elemID, text, e)
            {
                var code = (e.keyCode ? e.keyCode : e.which);
                var elem = document.getElementById(elemID);
                if (code === 13) {
                    elem.value += text;
                }
            }

Edited May 8, 2017 by dsonesuk

Sunamena · May 8, 2017

As soon as i start typing in the textarea and press the image with the onclick command, it stops functioning.

Both innerHTML and value put the content IN the textarea, but NOT anymore once any action has been preformed inside the textarea (such as deleted or typed something)

dsonesuk · May 8, 2017

There is a browser compatibility issue with using innerHTML for a form input, that is why you should use value instead.

This works fine for me, in all browsers

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>

        <script type="text/javascript">
            function insertText(elemID, text)
            {

                var elem = document.getElementById(elemID);

                elem.value += (' ' + text);

            }
        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div><textarea name="textarea1" id="bericht"></textarea></div>
        <img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42" onclick="insertText('bericht', 'mytext');">
    </body>
</html>

Sunamena · May 8, 2017

Strange something:

It does indeed work like this:

<head>

,,,
<script type="text/javascript">
function insertText(elemID, text)
{

var elem = document.getElementById(elemID);

elem.value += (' ' + text);

}
</script>

...

</head>

But i encounter the issues when i do this:

<head>
...

<script src="js/mylibrary.js"></script>

...
</head

dsonesuk · May 8, 2017

It won't work if the relative path to js file is wrong, if there is error in code preceeding this code or you have included <script></script> tags.

sandeepm · May 18, 2017

function insertText(elemID, text)
{
var elem = document.getElementById(elemID);
elem.value += text;
}

innerHTML is used to display text in html divs. By using name also we can get the values.

Sign In

Add text when click on

Recommended Posts

Sunamena

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Sunamena

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Sunamena

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

sandeepm

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity