-1

I have a very specific website in mind in which the words on the webpage are clickable and upon clicking it generates a new DOM element.

I'm trying to create a chrome extension in which when the user clicks on a webpage, the click triggers a function that returns the element generated by it's id.

right now this is what I have

<script>
  document.onclick = function(myFunction)

  function myFunction() {
    var x = document.getElementsById("v0")
    return x 
  }
</script>

I'm unable to see anything logged on console when I load the extension.

is document.onclick the right method to use? and should I use getElementByClassName or getElementById?

Baleno
  • 1
  • 5

2 Answers2

0

document.onclick = function(myFunction) is an error. You are trying to call a function called function and assign its return value to document.onclick — but function is a keyword and can't be a function name.

To assign myFunction as an onclick handler, then just assign that function:

document.onclick = myFunction;

That won't do you much good though: myFunction gets an element by its id and returns it, but the return value of a click event handler isn't used for anything (other than preventing the default behaviour of the click).

You would need to rewrite myFunction so it did something useful with the element.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I want myFunction to return the string content of the element v0, how do I do that? – Baleno Sep 26 '15 at 16:42
  • @Baleno — Return it to where? The return function of an event handler function should be `true` or `false`, not a string (although a sting will be treated as `true` or `false` depending on its content). – Quentin Sep 26 '15 at 16:43
  • I guess I would want the data to be stored in an object. the element is question is a word and it's definition. – Baleno Sep 26 '15 at 16:48
  • I would create a new object with the the word and it's definition as a key-value pair. And stored in the local storage of the browser – Baleno Sep 26 '15 at 17:29
  • OK, so forget about returning a value and use the local storage API. – Quentin Sep 26 '15 at 17:33
  • Actually, I would want to save that data on firebase, using the firebase API – Baleno Sep 26 '15 at 17:40
  • Fine, then use the firebase API. Just don't try to return the value because it doesn't make sense to return a value from an event handler. – Quentin Sep 26 '15 at 17:41
0

You're on the right track. You want to bind a click action to the document. After the click happens, you want the target of the event to be captured.

Using jQuery:

$(document).click(function(event) {
    var target = $(event.target);
});

Pure JS:

document.addEventListener("click", function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
}, false);

From there, you can do whatever you want with it. For example:

var id = target.attr('id');  // jQuery
var id = target.id;          // Javascript
Wes Foster
  • 8,770
  • 5
  • 42
  • 62
  • what would `var target = $(event.target)` do? set a variable called target to the the element clicked on? – Baleno Sep 26 '15 at 16:45