Function with internal call

Asked

Viewed 66 times

0

Is it possible to run a function only in javascript without using HTML ? I want the script to look for the id of a button in html and for the onclick function to appear only in the internal code of the script, without having to call it in the button attributes like "" It is possible ?

var play;
var controle = document.getElementById('button');

controle.onclick = function teste()
{

  if(document.getElementById("button").value == "Play")
 {
  document.getElementById("button").value = "Pause";
  play = setInterval(trocaBanner,4000);
 } 
 else
 {
  document.getElementById("button").value = "Play";
  clearInterval(play);
 }

}
<section class="banner">
      <figure>
       <input type="button" id="button" value="Play" />
       <img src="img/destaque-home.png" alt="Promoção : Big City Night"/
 </figure>
</section>

javascript

  • Dude I think you could give a broader description for what you want to do. Edit the question and put the context of what you have, what you want to do and how you expect it to work, because the way it is we have no context of what is happening...

  • I edited the question, can you help me ?

2 answers

0

You can include a System of a direct event in the element without having to include the attribute onclick in HTML as follows:

let play
let elemento = document.getElementById('button')

function handle (e) {
  if(document.getElementById("button").value == "Play") {
    document.getElementById("button").value = "Pause"
    play = setInterval(trocaBanner,4000)
    return
  } 

  document.getElementById("button").value = "Play"
  clearInterval(play)
}

elemento.addEventListener('click', handle)

This way you will not be modifying the HTML and will not be inserting a new attribute. See the test here

  • Let is a type of variable ? this "and" you placed between parentheses refers to the "ID" element? your solution is perfect, but please help me understand how I do something like this : </br> Document.querySelector('#button'). onclick = Function() { // event handling };

  • Your code does not work outside of Jsfiddle

  • Let is a variable. According to w3schools -> https://www.w3schools.com/jS/js_let.asp it is a scope variable only accessible to the block to which it belongs ex: { Let a=0; }.

  • let is the 2015 version of Javascript... It’s already working on all major browsers in its latest versions. You can replace it with var also, the difference is that let is attached to the block scope while var is declared outside the block scope

  • This code should work anywhere as long as it is up-to-date. What browser are you servicing when making this feature?

  • I’m using Chrome, I’ll try again and then comment again

  • Strange guy, I even tested this version in Chrome. See which version is being used, I’m in 72

Show 2 more comments

0

Hi from what I understand you want everything on onclick button, straight into the tag.

In your javascript the function of playing banner and the variables for control if you want to declare them:

    var inExecution = false;
    var play;       
    function trocaBanner()
    {
        console.log("baner");
    }

In your HTML:

    <section class="banner">
      <figure>
       <input type="button" id="button" value="Play" onclick="(inExecution ? (clearInterval(play), (this).value='Play', inExecution=false) : (play = setInterval(trocaBanner, 4000), (this).value='Pause', inExecution=true));" />
       <img src="img/destaque-home.png" alt="Promoção : Big City Night"/
    </figure>
   </section>

Note that I made one if ternary in the event onclick button to perform all functions.

If you want to put in a JS event do:

   window.onload = function() {
        var inExecution = false;
        var play;
        var elemento = document.getElementById('button');

        function trocaBanner() {
            console.log("baner");
        }

        elemento.addEventListener('click', function handle (evt) {
            if(inExecution) {
                elemento.value = "Play";
                clearInterval(play);
            } else {
                elemento.value = "Pause";
                play = setInterval(trocaBanner, 4000);
            }
            inExecution = !inExecution;
        });
    };

Note that I put inside window.onload so that the function addEventListener only add the event to the button after your page is loaded. Otherwise you should put the script after the button to make it work.

  • No, I want to do the opposite instead of putting the onclick call in html, I want to put it in and just manipulate it in the script, you know ?

  • Beauty put an addeventlistener inside a window.onload see how it looks.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.