Jump to content
Sunamena

Add text when click on

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×