Get ButtonPress

JavaScript
1

Hello,

I need to know, when a button on a page is clicked.
I have this Script am the moment:

window.onload = (function GetButtonPress() {
    var ele = document.querySelector('#function_area > div > button');
    var pressed = ele.getAttribute('aria-expanded');
    if (pressed) {
        console.log('Function-Button geklickt');
    }
      setTimeout(GetButtonPress, 1500);
})();

Now the Problem is, that it repeats the loop every 1500ms, even after the button is closed again (and ‘aria-expanded’ is set to false)

If it completely remove setTimeout(GetButtonPress, 1500);
The button click is not registered at all.
I also tried it via a Eventlistener, but that didnt work

1 Like
2

well, the EventListener is the way to go about this.

So… what did you try to do with that?

1 Like
3

I tried to create the Eventlistener like this:
document.querySelector('#function_area > div > button').getAttribute('aria-expanded').addEventListener('ValueChange', console.log('button gedrueckt'), false);

But I get an Error, can not read propterty ‘Addeventlistener’ of null.

The Problem is there is no such Attribute ‘aria-expanded’ before the button is clicked.
It is created, when I click on the button.
But I didn’t find a way to listen for the event, that a new attrubute=true has been added to the element.

addeventlistener(‘click’,.) did not react at all.

to clarify:
before clicking the button looks like this:

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						Function <span class="caret"></span>
						</button>

after clicking like this:

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
						Function <span class="caret"></span>
						</button>
4

Well the Attribute is not going to have an event for being clicked on, because you dont click on attributes, you click on buttons.

document.querySelector('#function_area > div > button').addEventListener('click', console.log('button gedrueckt'), false);
1 Like
5

Yes, I tried it that way too.
I tried it again now, but this doesnt work.
to the console it is logged once when the page loads and then never again if i click the button…

I also just noticed, that
<div class="btn-group">
changes to
<div class="btn-group open">
after I click the button. Can I get the click via that change?

6

Show us the whole of your HTML, because if that doesn’t work, I suspect your selector’s off.

7

I can not add everything, but this should be the relevant part:

8

Er… sorry yes, I see what I derped now.

The function code is being interpreted as a direct call, rather than a reference to the console.log function. So we have to wrap it in a lambda function to ensure the engine correctly interprets it as a reference.

document.querySelector('#function_area > div > button').addEventListener('click', function() { console.log('button gedrueckt') }, false);
9

Ok, this works now, thanks a lot :slight_smile:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.