CODEWITHSUNDEEP
javascriptjqueryhtmlcss
szubansky
szubansky

Reputation: 27

Returning different value depending on div clicked

I need to write one function that returns a string depending on a div clicked.

<div id="footer">
<table>
    <tr>
<td><div id="selectpeg1" onclick="selectPeg()"></div></td>
<td><div id="selectpeg2" onclick="selectPeg()"></div></td>
<td><div id="selectpeg3" onclick="selectPeg()"></div></td>
<td><div id="selectpeg4" onclick="selectPeg()"></div></td>
    </tr>
</table>

The selectPeg() function has to either return a string or a "background" parameter located in the CSS file (also as a string). So, if I click on a first peg, the function can return "blue", if I click the second peg the function returns "red" and so on...

CSS:

#selectpeg1 {
width: 50px;
height: 50px;
background: yellow;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 30px;
border-style: solid;

}

Upvotes: 1

Views: 279

Answers (3)

le_m
le_m

Reputation: 20238

Combining data-attributes with CSS variables provides for a clean solution:

function onSelectorClick(event) {
  console.log(this.dataset.color); // TODO: do something with color
}

document.querySelectorAll(".selector").forEach(element => {
  element.style.setProperty("--color", element.dataset.color);
  element.addEventListener("click", onSelectorClick);
});
.selector {
  width: 50px;
  height: 50px;
  border-style: solid;
  border-radius: 30px;
  background-color: var(--color, white);
}
<table>
  <tr>
    <td><div class="selector" data-color="red"></div></td>
    <td><div class="selector" data-color="blue"></div></td>
    <td><div class="selector" data-color="green"></div></td>
    <td><div class="selector" data-color="yellow"></div></td>
  </tr>
</table>

Upvotes: 1

sam23
sam23

Reputation: 599

if you want to use only javascript and not jquery then you need to make the following change.

  1. Pass this in the function call in the html:

    onclick="selectPeg(this)"

  2. In the java script function add a function argument:

    function selectPeg(element)

than you can easily get data from the element variable.

function selectPeg(element) {

    var id = element.id
    var backgroud = element.style.background
    var color = element.style.color

    // do anything you want to do
}

Upvotes: 1

sheriffderek
sheriffderek

Reputation: 9043

Example 1: https://jsfiddle.net/sheriffderek/nLfvrey7/

You can use 'data' attributes... they can be anything... data-bananas='2' or anything you want.

<ul class="thing-list">
  <li class="thing" data-info='one'>one</li>
  <li class="thing" data-info='two'>two</li>
  <li class="thing" data-info='three'>three</li>
</ul>


JavaScript.. using some jQuery

var $thing = $('.thing'); // cache node you'll use early

function getInfo(target) { // function that gets info from a given target
  var info = $(target).data('info'); // check target for data-info
  alert(info); // do something with that info
}

$thing.on('click', function() { // attach click event listener
  getInfo(this); // run function where the target is 'this' - the thing that got clicked...
});

You can certainly write this without jQuery: http://youmightnotneedjquery.com/

But the key here is conceptual - so, I'm just writing what is fastest and most readable. In most cases - trying to skip jQuery is just the current pack mentality and not really with much reason in many cases.

here is a full example with the colors changing for fun:

Example 2: https://jsfiddle.net/sheriffderek/dm4pofuz/

Upvotes: 2

Related Questions