What is the returned value of a clicked ?

Question

I want to get the returned value of a clicked button, and then use it to make an if statement. All the answers that I read here about people trying to do that are either very old using old script that doesn't work anymore, or not the same case.

function remove() {
  if (document.getElementById("removing").value == true) {

    document.getElementById("test").style.backgroundColor = "red";
  }
}

<div id="test">test</div>
<button id="removing" onclick="remove()">Remove a word</button>

I have tried using the value property, and onclick, but non of them equal true when the button is clicked.

I tried using alert to display the value, but it displays nothing.

Does clicking a button actually returns a value, and if so, what is it?

Answer 1

DOM Events are handled by an EventListener's callback function.

Thus such a handler function, if triggered by an event and forwarded by an event listener's handleEvent method, always will be invoked with an event object as this function's single argument.

All information related to this event are carried by the event itself. Its properties can be read and some even can be written/changed.

It is obvious from the provided example that the OP wants to assure that an event handler has been triggered by just a specific html element. Thus any valid approach just needs to look into the event's currentTarget property ...

// the way the OP might want to handle the problem.
function handleRemoveWord(evt) {
  const elmNode = evt.currentTarget;

  // make sure the handler was
  // triggered by the intended element ...
  // ... here by comparing node properties.
  if (
    (elmNode.tagName.toUpperCase() === 'BUTTON')
    && (elmNode.id === 'remove')
  ) {
    document
      .getElementById('test')
      .style.backgroundColor = 'red';
  }
}

// another way the OP might want to handle the problem.
function handleRemoveAnotherWord(evt) {

  // `this` referres to the element which got
  // bound to the handler via `addEventListener`.
  const targetNode = this;

  // make sure the handler was
  // triggered by the intended element ...
  // ... here by comparing node references.
  if (targetNode === evt.currentTarget) {
    document
      .getElementById('test')
      .style.backgroundColor = 'cyan';
  }
}

// an alternative way of solving the problem
// of always being assured about the correct
// element having triggering the event handling.
function handleRestoreWordWithBoundContext(evt) {
  const context = this;
  const { elmTest, elmRestore } = context;

  // make sure the handler was
  // triggered by the intended element ...
  // ... here by comparing node references.
  if (elmRestore === evt.currentTarget) {

    elmTest.style.backgroundColor = '';
  }
}


function initialize() {
  // the way(s) the OP might want to handle the problem.
  document
    .getElementById('remove')
    .addEventListener('click', handleRemoveWord);

  document
    .querySelector('#removeAnother')
    .addEventListener('click', handleRemoveAnotherWord);

  // an alternative way of soving the problem
  // of always being assured about the correct
  // element having triggering the event handling.
  const elmTest = document.querySelector('#test');
  const elmRestore = document.querySelector('#restore');

  elmRestore.addEventListener(
    'click',
    handleRestoreWordWithBoundContext.bind({
      elmTest, 
      elmRestore,
    })
  );
}
initialize();

<div id="test">test</div>

<button id="remove">Remove a word</button>
<button id="removeAnother">Remove another word</button>
<button id="restore">Restore a word</button>

As one might have noticed, the example features a third button with yet another way of implementing an event handler. This additional handler assumes its this context to carry additional information. This is possible by invoking bind on this handler function and providing exactly the information one wants to be present as the event handlers this context. Every time this function specific method is invoked it creates another function which does have access to the bound information via the this keyword.

Answer 2

Dispatching Javascript event handlers always returns true, even if it returns false, which we all know is used to prevent default behaviour of an event. We don't usually use the return values of Event handlers or even return anything for that matter.

In your case, I think you're trying to acess the value of the currentTarget element(the button 'removing' in your case). For this you can use the event object, which gets passed on as parameter to your event handler.

event.currentTarget is a way of referencing the element on which an event is being dispatched(triggered) on. It's just like using 'this' inside the event handler, except it also works on arrow functions.

So do something like this:

function remove(event) {
  let button = event.currentTarget;
  if (buttton.value) {
   document.getElementById("test").style.backgroundColor ="red";
  }
}

and in HTML,

<div id="test">test</div>
<button id="removing" onclick="remove(event)">Remove a word</button>

Notice I've used remove(event).

Edit Based on comment below: Using onclick will require you to create you a global 'remove' function. If you do, '...onclick="remove(event)" what it basically does is creates the function below, a wrapper basically:

// In the global scope
[reference element].onclick = ()  => {
  remove(event);
}

So you must have a global 'remove' function. So this won't work in modules cause each modules have their own top level scope. And you're gonna wanna have to use modules if you plan to work on sophisticated projects.

NOTE Using inline 'onclick' attributes in html has following disadvantages on heavy requests from a comment below:

-separation of concern : You usually don't want to mix up your UI logic(what happens on clicking a button) with presentation. You want a clear split between content, style and script.

-only one handler can be assigned using onclick.

-if an event is specified inline, the JS is specified as a string (attribute values are always strings) and evaluated when the event fires.(extra wrapper code builds internally).

-as I've mentioned before, you are faced with having to reference named functions. This is not ideal and has implications on the function needing to be global which will really bite you back when you use modules.

In short, handle events centrally via the dedicated addEventListener API.

Answer 3

Simply change background color onClick of button as:

function remove() {
  document.getElementById("test").style.backgroundColor = "red";
}

<div id="test">test</div>
<button id="removing" onclick="remove()">Remove a word</button>