Is it possible to call Function without being by onclick?

Question

It’s a cycle, where every round the function has to be executed, I’ve been researching and just found how to call by onclick. I believe it’s done by a script, but I can’t find the code.

http://exage-rado.tumblr.com/

<script type="text/javascript" charset="utf-8">
    var imgm = document.getElementsByClassName('image');
    var txt = document.getElementsByClassName('text');
    function control(mostra) {
        if(mostra == "all"){
            for (var i=0;i<imgm.length;i+=1){
                imgm[i].style.display = 'block';
            }
            for (var i=0;i<txt.length;i+=1){
                txt[i].style.display = 'block';
            }
        }else if(mostra == "image"){
            for (var i=0;i<imgm.length;i+=1){
                imgm[i].style.display = 'block';
            }
            for (var i=0;i<txt.length;i+=1){
                txt[i].style.display = 'none';
            }
        }else{
            for (var i=0;i<imgm.length;i+=1){
                imgm[i].style.display = 'none';
            }
            for (var i=0;i<txt.length;i+=1){
                txt[i].style.display = 'block';
            }
        }
    }
    </script>

. . .

<div id="button">
    <input id="tudo" type="button" value="All" onclick=control('all') />
    <input id="imagem" type="button" value="Image" onclick=control('image') />
    <input id="texto" type="button" value="Text" onclick=control('text') />
</div>

. . .

{block:Posts}
<a href="{ReblogURL}" target="_blank" title="Click to reblog">
<div id="posts">
    <div class="text">
        {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
        {block:Quote}
            <div id="postquote">“{Quote}”</div><br>
            {block:Source}<div id="sourcequote"> — {Source}</div>{/block:Source}
        {/block:Quote}
        {block:Link}
            <a href="{URL}"><h1>{Name}</h1></a>
            {block:Description}<p>{Description}</p>{/block:Description}
        {/block:Link}
        {block:Chat}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
        {block:Answer}
            <table width="500px" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="415px" class="question">{Question}</td>
                    <td width="30px"><span class="questionarrow">◤</span></td>
                    <td width="64px" class="asking"><img src="{AskerPortraitURL-64}><br>{Asker}</td>
                </tr>
            </table>
            <div class="answer">{Answer}</div>
        {/block:answer}
    </div>
    <div class="image">
        {block:Photo}<center><img src="{PhotoURL-500}"/></center>
        {block:Caption}{Caption}{/block:Caption}{/block:Photo}
        {block:Photoset}<center>{Photoset-500}</center>
        {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
        {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
    </div>

    {block:Audio}<span class="audio"><center>{AudioPlayerBlack}</center></span>{block:Caption}{Caption}{/block:Caption}{/block:Audio}
    <div id="ssource">
        {block:ContentSource}
            <a href="{SourceURL}">{lang:Source}:{block:SourceLogo}
            <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
            {/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}</a>
        {/block:ContentSource}
    </div>
</div>
</a>{block:HasTags}<br>{block:Tags} <a href="{TagURL}"><b>#</b>{Tag}</a>&nbsp;{/block:Tags}{/block:HasTags}
{/block:Posts}

Answer 1

I think in this case you can use the event DOMNodeInserted.

var div = document.getElementById('involves');
div.addEventListener('DOMNodeInserted', function(e){
  console.log(e.target); // veja na consola os novos elementos

  // corra a sua função
  control('all');
});

This event receiver will be activated each time DOM elements are inserted within #involves. Then you can run your function and you can also see which elements have been added.

Note: Your code (and is confirmed in the link you have now placed) is repeating all the Ids on each post. Ids must be unique.

Nota2: The event DOMNodeInserted will probably be replaced in the future by Mutation Observers but for now only accessible to IE11+ and modern browsers

The code in this case would be:

var div = document.getElementById('involves');
var observer = new MutationObserver(function(mutations) {
    // corra a sua função
    control('all');  
});

// configuração:
var config = { attributes: true, childList: true, characterData: true };
observer.observe(div , config);

// Caso queira parar o observador
observer.disconnect();

Answer 2

Once declared, a function can be called in any Javascript snippet.

For the common purposes of Internet scripts, it can be said that almost always function calls and other operations are made in response to events: the loading of the page, the click of a button, a change in a <input />, among others.

However, nothing prevents the programmer from calling the function as the first instruction of the first line of scripting; the problem, however, is that sometimes not all HTML elements and other scripts have been loaded into memory, which often causes errors.

Anyway, your problem is more related to know which element listen by events than properly the "call Function without being by onclick". So I suggest you check the documentation of the plugin/API you are using, as there should be support for adding a function callback as a listener to the creation event of each of these <div>which you refer to.