-1

How can i take value from event onClick in variable?

I have button with two span with languages in my html

<button class="switch" >
<span class='span switch_span spanlg span-dark' id = 'en' data-lang="en">EN </span>
<span class='switch_span1 spanlg'>/</span> 
<span class='span spanlg span-dark' id = 'ru' data-lang="ru" >RU</span>
</button>

and i need to receive in variable onclick id or data-lang in script.js

i try below, but it doesn't work

const span = document.querySelectorAll('.span');

var postId='';

span.forEach(function(spa) {

    spa.addEventListener('click', function() {
      postId = this.getAttribute('id');
      return postId;
    })
})

console.log(postId)

and postId didn't receive id

i need to have this id in variable

Thank you very much for your help!

CatDog
  • 31
  • 1
  • 5
  • 1
    `return` doesn’t make sense inside `addEventListener`. There’s nothing to return to. Logging the `postId` also doesn’t make sense. See [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](/q/23667086/4642212). Where do you need to use the ID? – Sebastian Simon Jan 23 '22 at 19:59
  • Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). – Sebastian Simon Jan 23 '22 at 19:59
  • Use `addEventListener("click", (event) => { const target = event.target.closest(".span"); if(target){ console.log(target.id); } });`. Replace `console.log(target.id);` by whatever your actual goal is. Consider using `target.dataset.lang` instead since IDs are not meant for storing arbitrary data. – Sebastian Simon Jan 23 '22 at 20:01
  • Thank you, but i need to update my variable this en or ru, on what i click – CatDog Jan 23 '22 at 20:08

2 Answers2

0

You should get the target from a parameter of your listener function, like:

function(event) {
  postId = event.target.id;
}

Chek this for more information: https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Also note that the variable is set only after the event is triggered.

Emanuele Scarabattoli
  • 4,103
  • 1
  • 12
  • 21
  • I need to have this id in my variable in js( – CatDog Jan 23 '22 at 20:10
  • Yes, it is in the variable, but only when you click, since the value is set in the on click event. Now all depends on what you need to do whith the value and when. I mean, is the variable used to set the last-clicked element? Or you need to use the variable for something different? – Emanuele Scarabattoli Jan 23 '22 at 20:14
  • i need to pass this value to another function: function getTranslate(postId) and one more function: function getLocalStorage() { if (localStorage.getItem('lang')) { const postId = localStorage.getItem('postId'); getTranslate(postId);} – CatDog Jan 23 '22 at 20:19
0

You just aren't calling console.log at the right time or in the right place

span.forEach(function(spa) {

    spa.addEventListener('click', function() {
      postId = this.getAttribute('id');
      console.log("id: " + postId);
      return postId;
    })
})

//console.log(postId)
ControlAltDel
  • 33,923
  • 10
  • 53
  • 80