Is it possible to call function other than onclick? [closed]

Question

Is it possible to call function other than onclick? [closed]

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

It's a cycle, where every round the function has to be executed, I've been searching, and I just found out how to call by onclick. I believe it's done by a script, but I do not find the code.

link

<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}

javascript

asked by anonymous 25.11.2014 / 20:57

2 answers

1

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: page load, click of a button, change in a <input /> , among others.

However, nothing prevents the programmer from calling the function as the first statement in 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.

In any case, your problem is more related to knowing which element to listen for events than to calling function instead of onclick in>. So I suggest you check the documentation for the plugin / API you are using, as there should be support for adding a callback function as a listener to the creation event of each of these <div> s to which you mean.

25.11.2014 / 21:15

Calling the jQuery event not working [duplicate] bootstrap modal does not work

score 3 · Accepted Answer

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

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 observer will be activated every time DOM elements are inserted within #involves . There you can run your function and you can also see what elements have been added.

Note: Your code (and it's confirmed on the link you've placed now) is repeating all IDs for each post. IDs have to be unique.

Note2: The DOMNodeInserted event will probably be replaced in the future by Mutation Observers but for the time being are 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();