How to get clicked query's value?

Question

i have some html element and each of them has onclick attribute. and every onclick attribute's value is different. i want to get clicked one's value.

<div class="test" onclick="something1">Lorem ipsum</div>
<div class="test" onclick="something3">Lorem ipsum</div>
<div class="test" onclick="something2">Lorem ipsum</div>

window.addEventListener('click', function(e) {
   var test = document.querySelector(`.test[onclick="${e}"]`);
   console.log(test) 
}) 

here i just want to get the clicked div's onclick value.

Answer 1

Why not just binding the event to the desired elements.

 Array.from(document.querySelectorAll('.test')).forEach(e => { // Add a data-attribute to store the current onclickvalue. e.dataset.onclickvalue = e.getAttribute('onclick'); // gets the attribute value. e.onclick = ""; // this is to avoid an event call. e.addEventListener('click', function() { console.log(this.dataset.onclickvalue); }) });

 <div class="test" onclick="something1">Lorem ipsum</div> <div class="test" onclick="something3">Lorem ipsum</div> <div class="test" onclick="something2">Lorem ipsum</div>

Answer 2

onclick="something*" are malformed on-event attributes. The correct syntax is:

 onclick="something2();"

Normally an on-event attribute has a function or statement as its value -- but AFAIK data types and primitive values are never a value of an on-event attribute (but technically anything can be an attribute with a value but it's not standard and it's just plain ugly). Moreover, the use of on-event attributes are generally discouraged and the use of .addEventListener() encouraged (the on-event property is neither encouraged nor is it discouraged):

on-event attribute: <div class="test" onclick="callback();" >TEST</div>

on-event property: document.querySelector(".test").onclick = callback;

event listener: document.querySelector(".test").addEventListener("click", callback);

Although completely valid, using a div as a clickable element for user interaction is a poor choice. Interactive tags such as <button> , <input> -- even <a> are far better choices because they feature built-in behavior that facilitates user interaction, and UI logic. In addition buttons and links are even better semantically.

1. Assuming that we'll continue with <div>s despite of what was previously discussed,

2. we have established that the onclick attributes should be removed since:
   A. the general use of on-event attributes is discouraged and
   B. they are syntactically incorrect anyhow.

3. <div>s do not have a convenient value attribute like <button> or <input> tags. Fortunately any tag can have a data-* attribute . Each <div> is assigned data-value attribute with a unique value (any string value can be assigned). The value can be accessed with the .dataset property:

    var value = document.querySelector(".click").dataset.value; // get value document.querySelector(".click").dataset.value = '3'; // set value

4. An event listener is bound to the document object which is registered to the click event. So if the user clicks anywhere on the page, the event listener will invoke the callback function (ex. function clickHandler() ). The callback function will determine what is specifically clicked by using the event.target (ex. <div class="click"> ) property while all other tags are ignored. This process is a part of a programming pattern called Event Delegation .

Details are commented in demo

 /* Bind document to the click event callback is function clickHandler() */ document.addEventListener('click', clickHandler); // Always have callback functions pass the Event Object function clickHandler(event) { // Reference the clicked tag var clicked = event.target; /* if the clicked tag has the className of '.click'... ...get the value of data-value and log it to console */ if (clicked.className === 'click') { var value = clicked.dataset.value; console.log(value); } }

 <div class='click' data-value='1'>CLICK 1</div> <div class='click' data-value='2'>CLICK 2</div> <div class='click' data-value='3'>CLICK 3</div> <div class='click' data-value='4'>CLICK 4</div>

Answer 3

Make it sweet and simple, I just write a basic onclick method. I hope it'll help you out. Thanks

You have to provide method name in onclick attribute like something() . Not just string

 function something(e) { console.log(e.innerText); }

 <div class="test" onclick="something(this)">something1</div> <div class="test" onclick="something(this)">something3</div> <div class="test" onclick="something(this)">something2</div>

Answer 4

 function getvalue(x) { console.log(x); }

 <div class="test" onclick="getvalue(1)">Lorem ipsum</div> <div class="test" onclick="getvalue(2)">Lorem ipsum</div> <div class="test" onclick="getvalue(3)">Lorem ipsum</div>

try this code .