using a function with click() javascript

Question

I am trying to use a function with click(). I get no errors in the console how can I make it so that when the click happens it will perform the action in the function? Here is the code I am working with.

inputIds = [].filter.call(document.getElementsByTagName('input'), function(el) {
                return el.id.indexOf('ansx') === 0;
            }).map(function(el) {
                return el.id;
            });
            // random number between low and high range
            inputId = inputIds[Math.floor(Math.random() * inputIds.length)];

    document.getElementById(inputId).click(function() {
        chrome.extension.sendMessage({ message: "text here" }, function(response) {
            return response;
        });
    });

So, is this not working? Pretty sure the return response; isn't actually doing anything. — gen_Eric
– gen_Eric, Commented Aug 1, 2012 at 18:41
@Rocket they work separately but if i try with the code above it does not — Daniel
– Daniel, Commented Aug 1, 2012 at 18:47
You are selecting an ID at random. Silly question, but are you trying to click on the right element? — gen_Eric
– gen_Eric, Commented Aug 1, 2012 at 19:04
I know it's random, so how you do know you are clicking on the right element? — gen_Eric
– gen_Eric, Commented Aug 1, 2012 at 19:06

Daniel A. White · Accepted Answer · 2012-08-01 18:41:00Z

3

click isn't an event-binding function against a DOMElement which getElementById returns. As commenters have noted, click invokes the event. You need to use jquery or use plain old event handlers.

answered Aug 1, 2012 at 18:41

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Esailija Over a year ago

It is a function but it doesn't attach event handlers, it simply clicks the element.

gen_Eric Over a year ago

Actually there is element.click, but it's for triggering the event, not setting it.

Diogo Cardoso · Accepted Answer · 2012-08-01 18:42:47Z

1

If you're not using any JavaScript framework you should use addEventListener instead of click function.

document.getElementById(inputId).addEventListener("click", function() {
    chrome.extension.sendMessage({ message: "text here" }, function(response) {
        return response;
    });
});

answered Aug 1, 2012 at 18:42

Diogo Cardoso

22.4k26 gold badges103 silver badges139 bronze badges

3 Comments

Daniel Over a year ago

@Diogo for example this document.getElementById(inputId).addEventListener("click", function() { console.log("test") }); it doesn't write to the console

gen_Eric Over a year ago

@Mr.1.0: What is inputId? Does console.log(document.getElementById(inputId)) print anything?

Diogo Cardoso Over a year ago

@Mr.1.0 the variable elementId must refer to the HTML element that when clicked will execute the function.

Segu · Accepted Answer · 2012-08-01 19:01:18Z

1

This is a generic implementation of addEvent that works across browsers.

function addEvent(el, type, eventHandle){
   if ( el.addEventListener ) {
      el.addEventListener( type, eventHandle, false );
   } else if ( el.attachEvent ) {
      el.attachEvent( "on" + type, eventHandle );
   } else {
      el[type] = eventHandle;
   }
}

Your code would look like

addEvent(document.getElementById(inputId), "click", function() {
    chrome.extension.sendMessage({ message: "text here" }, function(response) {
        return response;
    }); 
  });

I would recommend anyone to use a base framework like jQuery as it would mask a lot of such quirks.

answered Aug 1, 2012 at 19:01

Segu

2662 silver badges2 bronze badges

Collectives™ on Stack Overflow

using a function with click() javascript

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related