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>

The console is your friend. salutationsHandler isn't an event handler, it's just a function that runs every second. You get the box then ignore it when setting text. — Dave Newton
– Dave Newton, Commented Nov 22, 2018 at 19:03

Ori Drori · Accepted Answer · 2018-11-22 19:05:45Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related