1

I'm new to JavaScript and I'm trying to make a Chrome extension that prints a message whether it can access a button. This is my code:

chrome.browserAction.onClicked.addListener(function(tab) {
    var button = document.getElementById("mybutton");
    if(button == null){
        alert("doesn't work");
    }
    else{
        alert("works");
    }
});

This shows 'doesn't work'. What am I doing wrong?

This is my html page:

<html>
  <button id="mybutton">click me</button>
  <script>
    var greeting = "hello, ";
    var button = document.getElementById("mybutton");
    button.person_name = "Bob";
    button.addEventListener("click", function() {
      alert(greeting + button.person_name + ".");
    }, false);
  </script>
</html>
TheChosenOne
  • 705
  • 1
  • 6
  • 14

2 Answers2

0

Your button has only an id and a innerHTML, but no value (value is a parameter to your button and not the content inside the open and close tags). If you want to catch the "click me" value, probably you want to get the innerHTML and not the value itself.

so, try to change:

var text = button.value;

to

var text = button.innerHTML;

and probably it should works.

EDIT

I don't know how you are updating your code to put the innerHTML, but here's a snippet who probably works:

<html>
  <button id="mybutton">click me</button>
  <script>
    var greeting = "hello, ";
    var button = document.getElementById("mybutton");
    button.person_name = button.innerHTML;
    button.addEventListener("click", function() {
      alert(greeting + button.person_name + ".");
    }, false);
  </script>
</html>
Joao Paulo Rabelo
  • 155
  • 7
  • If you're getting that error, you're not setting `button` properly. Are you sure you're waiting for the DOM to be loaded before setting the variable? – Barmar Jan 23 '14 at 01:30
  • You will need adjust some few things on your code. The script are rendered at the same moment of your html, so the button may be or may be not created yet. The best thing for you is to create a function that do these things and append it into your button click. I've tried your code and it not works. But, if you open the chrome console and repeat the getElementById and button.innerHTML it works. – Joao Paulo Rabelo Jan 23 '14 at 01:31
  • @Barmar, jsfiddle is pretty good into handle DOM, once they put the head and body tags properly and waits for load to execute js. The answer is correct, but TheChosenOne probably still have some issues with DOM adjustments – Joao Paulo Rabelo Jan 23 '14 at 01:35
  • I don't think it that is the problem. If I move the "var button = document.getElementById("mybutton");" inside the click-function, it gives button == null. – TheChosenOne Jan 23 '14 at 12:57
  • please, look at my edit with a snippet of code that should work – Joao Paulo Rabelo Jan 23 '14 at 23:14
0

In case,you want to control the events with DOM in your page ,You should use " content_scripts" Define manifest.json add content_scripts 

 "content_scripts": [
        {
          "matches": ["http://www.google.com/*"], // replace by your page 
          "css": ["mystyles.css"],
          "js": ["myscript.js"]
        }
      ],

And myscript.js,

document.onreadystatechange = function(){
    var button = document.getElementById("mybutton");
    if(button == null){
        alert("doesn't work");
    }
    else{
        alert("works");
    }
};

Hopefully, it helps you

LogPi
  • 706
  • 6
  • 11