Selectors in javascript or Jquery

Question

How to get value of particular selector with same class?

function rev() {
  var username = document.getElementByClass(value).value; /// or textContent;
  return alert (username);
}

                <a href="#" class="but" onclick="rev()">Hey</a>
                <a href="#" class="but" onclick="rev()">Hey2</a>

                <button class="but" onclick="rev()">hey</button>
                <button class="but" onclick="rev()">NOww</button>

But the reult always HEY

Any ideas?

"How to get value of particular selector" — Selectors don't have values. They are ways to identify elements (or pseudo-elements) in a document. — Quentin, Apr 20 '17 at 14:21
ids should always be unique, there shouldn't be two ids which are the same. If your goal is to echo the value of the clicked element, use `alert($(this))` — Tobias F., Apr 20 '17 at 14:21
`var username = document.getElementByClass(value).value` — This will always throw a ReferenceError and abort the script because the `value` variable is undeclared. If it didn't, it would throw "Not a function" because `getElementByClass` is `undefined` — Quentin, Apr 20 '17 at 14:22
You need to provide a clear problem statement and a real [mcve] (preferable in the form of a live demo, the stackoverflow question editor has a button for adding live demos, use it). — Quentin, Apr 20 '17 at 14:23
I found a question regarding building selectors based on the location in the DOM: http://stackoverflow.com/questions/2068272/getting-a-jquery-selector-for-an-element Does this help? — evolutionxbox, Apr 20 '17 at 14:26

score 0 · Answer 1 · answered Apr 20 '17 at 14:42

0

It looks like you're trying to get the innerText of each element with the class of but, then alert that value/innerText based on the element that was clicked...

You could grab all buts then supply each but with an onclick method like so:

var buts = document.getElementsByClassName('but');
var keys = Object.keys(buts);

keys.forEach(function(but, idx) {
  buts[idx].onclick = function() {
    var username = buts[idx].innerText;
    alert(username);
  };
});

This will alert the Hey for the first but, Hey2 for the second but, etc.... You can see the example working here:

http://jsbin.com/yunulayihi/edit?html,js,output

answered Apr 20 '17 at 14:42

goto

4,336
15
20

lmao ridiculous, why did someone decide to downvote clearly valid solutions to what this person is asking...? – goto Apr 20 '17 at 17:53
Yeah... I'm the above -- I'm upvoting yours back to 0. We suggested similar things, and unless I'm missing something about the question (or someone has a specific beef they're just not willing to state), there's no reason for our answers to be downvoted. – Benjamin Robinson Apr 24 '17 at 17:24

score 0 · Answer 2 · answered Apr 20 '17 at 14:57

Your question as asked has multiple issues, and I'm assuming it's intended to be pseudocode, because it wouldn't even get as far as returning 'Hey' as written.

Firstly, I believe you're intending to use getElementByClassName, not 'getElementByClass'

Secondly, I think you want textContent, not value from the clicked element.

But as far as your problem, I think the issue is that you're calling:

document.getElementByClassName('but').value

Which effectively means that when rev() is called, it searches the document for ALL instances of .but and looks for an object property called 'value'...

Instead, you want the textContent of just the element whose onclick event has been triggered. To do that, you need to capture the event in your event handler function, rev()

Here's a way you can attach rev() function as the 'click' event handler to all items in the document with the className .but -- note that I removed the function rev() from the HTML onclick attribute, and instead it gets added do each element when .map() loops through and calls button.addEventListener():

var buts = document.getElementsByClassName('but');
var buttons = Array.prototype.slice.call(buts);

buttons.map(function(button) {
  button.addEventListener('click', rev);      
});

function rev(e) {
  
  // This is the element targeted by the current event.
  var element = e.target;
  
  // Assuming you want 'Hey', 'Hey2', etc.
  var value = element.textContent;
  
  alert(value);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <a href="#" class="but">Hey</a>
  <a href="#" class="but">Hey2</a>

  <button class="but">hey</button>
  <button class="but">NOww</button>
</body>
</html>

The short answer is really: to get some specific value from an element which is listening for an event, you have to capture the event object -- the 'target' property of the event object is the element listening on the event.

Was this not what you were asking how to do? I'm just curious why it's downvoted. — Benjamin Robinson, Apr 20 '17 at 17:19

score -3 · Answer 3 · answered Apr 20 '17 at 14:23

-3

you can use each function in jquery to get text

 $('.but').each(function(){
   $(this).text()   // you can access any attribute for this class 
 });

answered Apr 20 '17 at 14:23

jignesh prajapati

77
2
10

Hi what's the problem with this code to give me -3 reputation ? – jignesh prajapati Apr 20 '17 at 14:25
I didn't downvote you myself, but the problems I see are that it uses jQuery while the question is plain JS, which means that firstly the asker would have to add jQuery as a dependency in order to use your solution. Secondly, while your code would identify the text content for each item on the page, it won't do what the asker wants... I think they want the '.but' items to listen for a click event and return only their own textContent. Clicking the link with 'Hey2' should call `alert('Hey2')`, etc. – Benjamin Robinson Apr 20 '17 at 15:02

Selectors in javascript or Jquery

3 Answers3