Multiple onclick button events Vanilla Javascript

Question

I would like to change an inputs value whenever one of my many "li" tags are clicked (without using jQuery). I listed two of the list tags in my HTML below and I want to differentiate between them in my if statement. What would I put inside the if parameters to display buttons[0] being clicked or buttons[1]?

function myFunction() {
  var input = document.getElementById('values');
  var buttons = document.getElementsByTagName('li');
  if(buttons[0]) {
    input.value = 0;
  }
  else if(buttons[1]) {
    input.value += 1;
  }
};

HTML :

<div class="box">
  <input id="values" type="text" placeholder="2017">
  <ul>
    <li onclick="myFunction()" id="1">C</li>
    <li onclick="myFunction()" id="2">1</li>
  </ul>
</div>

jeff_mid · Accepted Answer · 2017-02-03 05:17:57Z

1

Two mistakes.

First, It is because of your if statement checks whether button[0] and button[1] are undefined.

Since button[0] is defined, it never goes to your second condition. So, your statement is just the same as:

function myFunction() {
  var input = document.getElementById('values');
  var buttons = document.getElementsByTagName('li');
  if(buttons[0]) {
    input.value = 0;
  }
  // the second if else is redundant because buttons[0] is not undefined
};

Second, input value is in string, so to increment, you need to parse it to integer. So for the fix:

function myFunction(e) {
  var input = document.getElementById('values');
  var buttons = document.getElementsByTagName('li');
  if(buttons[0].id === e.target.id) {
    input.value = 0;
  }
  else if(buttons[1].id === e.target.id) {
    input.value = parseInt(input.value) + 1;
  }
};

And your html needs to change a bit, because the function needs to capture the click event:

<div class="box">
  <input id="values" type="text" placeholder="2017">
  <ul>
    <li onclick="myFunction(event)" id="1">C</li>
    <li onclick="myFunction(event)" id="2">1</li>
  </ul>
</div>

answered Feb 3, 2017 at 5:17

jeff_mid

361 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zach Over a year ago

Thanks this solved most of it! My way might not have been the most effective way to approach it (I'm new to JS), but I think I can build off of this answer

guest271314 · Accepted Answer · 2017-02-03 05:02:38Z

1

Given html at Question, if <li> elements have an id, you can pass this to myFunction, use id of li element

  <li onclick="myFunction(this)" id="1">C</li>
  <li onclick="myFunction(this)" id="2">1</li>

  if(this.id === "1") {
    input.value = 0;
  }
  else if(this.id === "2") {
    input.value += 1;
  }

answered Feb 3, 2017 at 5:02

guest271314

1

3 Comments

Levi Mootz Over a year ago

Why not just <li onclick="document.getElementById('values').value = 0;" id="1">C</li>? Based on the OP's code this would be more concise as there's no point in the myFunction function when you think about it with it's current logic. Having said that, it's not the best approach when what should really be happening is the use of a click event listener to handle things, and removing the onclick code defined in the li tag attributes.

guest271314 Over a year ago

"Why not just <li onclick="document.getElementById('values').value = 0;" id="1">C</li>?" There could be other conditions? See Answer at "Given html at Question".

Levi Mootz Over a year ago

True, but you're adding an additional if statement for each case which bloats things.

thesublimeobject · Accepted Answer · 2017-02-03 05:16:16Z

0

I am somewhat confused as to what you want, but I think this should come pretty close? Let me know and I'm happy to help further.

EDIT: Just noticed you were calling this function from the element itself. Ignore this unless you want to abstract it, which I would usually suggest.

function myFunction() {
  var input = document.getElementById('values');
  var buttons = document.getElementsByTagName('li');

  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
      if (i === 0) {
        input.value = 0;
      }
      else if(i === 1) {
        input.value += 1;
      }
    })
  }
}

edited Feb 3, 2017 at 5:16

answered Feb 3, 2017 at 5:04

thesublimeobject

1,4031 gold badge19 silver badges22 bronze badges

Comments

zer00ne · Accepted Answer · 2017-02-03 05:40:43Z

Instead of binding events to each <li>, use event delegation. Details are commented in Snippet.

SNIPPET

// Reference the <ul>
var list = document.querySelector('ul');

// When list is clicked call function delegator()
list.addEventListener('click', delegator, false);

/* This function uses a pattern called event...
||...delegation. Basically we register the event...
||...on the parent of multiple clickable elements...
||...In this case it would be <ul> and the children...
||...<li> would be the last in an event chain...
||...which would make that particular <li>...
||...the event.target (the one that's clicked)...
||...Any other elements above event.target are...
||...event.currentTarget. By knowing this, we can...
||...determine event.target by determining what is...
||...event.currentTarget.
*/
function delegator(event) {
  // If it ain't event.currentTarget...
  if (event.target !== event.currentTarget) {
    /*...then it's gotta be event.target...
    ||...so let's store it's id in a var
    */
    var tgt = event.target.id;
    // Reference the id to as an DOM object
    var target = document.getElementById(tgt);
    // Get and store target's text
    var value = target.textContent;
    // Get and set textbox's value to the text of target
    document.getElementById('values').value = value;
  }

  return false;
}

<div class="box">
  <input id="values" type="text" placeholder="2017">
  <ul>
    <li id="i1">C</li>
    <li id="i2">1</li>
  </ul>
</div>

Collectives™ on Stack Overflow

Multiple onclick button events Vanilla Javascript

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related