How to call javascript function without button click?

Question

I have seen some pages in which we can input in textarea and correspondingly an output gets displayed for it no button clicks in between , see an example here http://ntools.infoexpo.in/p/html-to-xml-encoder_4042.html

How to apply this type in the below code? html:

<textarea  id="source"  placeholder="Text Entry."></textarea>
<p id="result"> </p>

Javascript

function myFunction()
{
var str = document.getElementById('source').value;

var len = str.length;
    document.getElementById("result").innerHTML="<textarea>"+len+"</textarea>";

}

script works, but how to customize it in order to apply this script in code of a google chrome app - im writing ; google chrome app rules has some restrictions on javascript inclusion ; see this stackoverflow.com/questions/20727493/… — Sreeraj
– Sreeraj, Commented Mar 16, 2014 at 4:18
I answered what your question demanded, I am not aware of google chrome extensions, that you have to find out — nanobash
– nanobash, Commented Mar 17, 2014 at 9:06

MusicLovingIndianGirl · Accepted Answer · 2014-03-15 10:11:28Z

8

If you want to call in on load of your page try this

<body onLoad="yourFunctionName();">

answered Mar 15, 2014 at 10:11

MusicLovingIndianGirl

5,9459 gold badges38 silver badges65 bronze badges

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

Comments

nanobash · Accepted Answer · 2014-03-15 10:46:12Z

I'd suggest you to use addEvent,removeEvent function approaches due to cross browser issues.

addEvent function is capable of to add events on elements, while removeEvent remove them

if ( document.addEventListener ) { // if addEventListener provided
    this.addEvent = function(elem, type, fn) {
        elem.addEventListener(type, fn, false);
        return fn;
    };

    this.removeEvent = function(elem, type, fn) {
        elem.removeEventListener(type, fn, false);
    };
} else if ( document.attachEvent ) { // if attachEvent provided
    this.addEvent = function(elem, type, fn) {
        var bound = function() {
            return fn.apply(elem, arguments);
        };
        elem.attachEvent("on" + type, bound);
        return bound;
    };

    this.removeEvent = function (elem, type, fn) {
        elem.detachEvent("on" + type, fn);
    };
}

For example if you have HTML

<textarea  id="source"  placeholder="Text Entry."></textarea>
<textarea  id="result"  placeholder="Text Entry." disabled="disabled"></textarea>

JavaScript

addEvent(document.getElementById("source"),"keydown",function(){ // event will occur on keyup
    document.getElementById("result").innerHTML = this.value; // this refers to textarea element
});

JSFiddle

PS. Check out attachEvent and addEventListener methods

a.ras2002 · Accepted Answer · 2014-03-15 10:26:23Z

1

I recommend you to use the onchange event, so everytime the user made some change on the text field it will trigger the function.

HTML will be something like this

<textarea id="source" onchange="myFunction();" placeholder="Text Entry."></textarea>
<p id="result"> </p>

JavaScript code

function myFunction() {
    var str = document.getElementById('source').value;

    var len = str.length;
    document.getElementById("result").innerHTML="<textarea>"+len+"</textarea>";

}

answered Mar 15, 2014 at 10:26

a.ras2002

3852 gold badges7 silver badges22 bronze badges

1 Comment

nanobash Over a year ago

It's bad practice that you are recommending such an approach, even though OP wants to get rid of it

Dude Lebowski · Accepted Answer · 2014-03-15 10:08:08Z

0

use onchange event:

object.onchange=function(){SomeJavaScriptCode};

answered Mar 15, 2014 at 10:08

Dude Lebowski

1591 silver badge10 bronze badges

Comments

Jixun · Accepted Answer · 2014-03-15 10:12:14Z

0

<textarea cols="40" onchange="do_encode(this)" onkeyup="do_encode(this)" ...>

Every time user type/paste anything will trigger onchange and onkeyup event.

There's a full list of events reference on MDN.

answered Mar 15, 2014 at 10:12

Jixun

14011 bronze badges

Comments

nanobash · Accepted Answer · 2014-03-15 10:33:06Z

0

document.getElementById('source').onchange(function() {
     // Write your code here . It will execute when your changes the text in textarea

})

go through the link http://www.w3schools.com/jsref/event_onchange.asp

edited Mar 15, 2014 at 10:33

nanobash

5,4967 gold badges41 silver badges56 bronze badges

answered Mar 15, 2014 at 10:31

Vamshavardhan G

11 bronze badge

2 Comments

nanobash Over a year ago

Bad practice, also textarea doesn't support onchange event

Sreeraj Over a year ago

@crypticous how it works here ntools.infoexpo.in/p/html-to-xml-encoder_4042.html

Collectives™ on Stack Overflow

How to call javascript function without button click?

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

2 Comments

Linked

Related