trying to get my button to change text without user interaction javascript

Question

i made a button function that has a button with a word and when its clicked the definition shows. but now i'm trying to make it so that the buttons shows the definition every couple seconds with "SetInterval" without needing to be clicked and i don't know how to go about doing so can you please help.

 'use strict'; //below is the function for the even $(document).ready(function() { // function salutationsHandler(evnt) { let box = $("#message-box"); if (box.hasClass("hidden")) { box.attr("class", ""); $(evnt.target).text("1.Salutation"); } else { box.attr("class", "hidden"); $(evnt.target).text('a greeting in words or actions'); } } //end of function setInterval(salutationsHandler, 1000); //start of another function DiffidenceHandler(evnt2) { let box2 = $("#message-box2"); if (box2.hasClass("hidden")) { box2.attr("class", ""); $(evnt2.target).text("2.Diffidence"); } else { box2.attr("class", "hidden"); $(evnt2.target).text("the quality of being shy"); } console.log(evnt2); } //lets me target id let salutationsGrab = $('#Salutations'); // adds event to said id // event listeners grab events from functions salutationsGrab.on('click', salutationsHandler); let DiffidenceGrab = $("#Diffidence"); DiffidenceGrab.on("click", DiffidenceHandler); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>hello welcome to our dictionary</h1> <h2>Click on button to reveal definition of word shown</h2> <button id="Salutations">1.Saluation</button> <div id="message-box"></div> <br> <button id="Diffidence">2.Diffidence</button> <div id="message-box2"></div> <br> 

Answer 1

The function salutationsHandler needs the event object generated by an event to work. Instead of calling the function directly, you can use jQuery's .trigger() to "click" the button.

 function salutationsHandler(evnt) { const box = $("#message-box"); const target = $(evnt.target); if (box.hasClass("hidden")) { box.removeClass("hidden"); target.text("1.Salutation"); } else { box.addClass("hidden"); target.text('a greeting in words or actions'); } } let salutationsGrab = $('#Salutations'); salutationsGrab.on('click', salutationsHandler); setInterval(() => salutationsGrab.trigger('click'), 1000); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>hello welcome to our dictionary</h1> <h2>Click on button to reveal definition of word shown</h2> <button id="Salutations">1.Saluation</button> <div id="message-box">a greeting in words or actions</div>