JS bookmarklet issue: Code works in console, fails in bookmarklet

1 Views

Using a JS bookmarklet to set a custom field in the WordPress Edit Post screen. The following code works well when I copy/paste it into the console (latest Chrome stable): 

document.getElementById('metakeyselect').value = "foo";
document.getElementById('metavalue').value = "bar";
document.getElementById('meta-add-submit').click();

Works without a hitch; I jut paste this into the console, and a new custom var is added to the post (I have “foo” as a var name in WP already).

Read More

In bookmarklet form, this same code looks like this: 

javascript:document.getElementById('metakeyselect').value = "foo";document.getElementById('metavalue').value = "bar";document.getElementById('meta-add-submit').click();

And it fails: When I click it, the Name and Value boxes are filled in, but nothing gets submitted. The console shows the following error: 

Uncaught TypeError: Cannot call method 'click' of null

Any idea why? Same exact code, same browser, same page.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. I had a similar problem and am quite sure that’s what causes your code to break too.
    My minimal example would be the following code on this website (should work afor the entire stackoverflow.com domain):

    document.getElementsByName("q")[0].value="foo";

    This should write “foo” to the search field (that has no id but is the only element with the name “q”). Both web console and bookmarklet will set the value as expected but the bookmarklet will also change the page to an empty header and a body containing only the word “foo” after a short delay. Assuming that this is not a random bug that only applies to me, the reason for the thrown exception in your example is that the bookmarklet sets the value “foo”, then “bar” but changes the content of the web page to “foo”, then “bar” before your last line terminates.

    Unfortunately I don’t know the reason for this behaviour (I found this question looking for that exact information) but that is what most likely causes the TypeError in your excample.

    It is possible that the same code runs without any problems when used in a Greasemonkey script (e.g. as the onclick script of a button you added using Greasemonkey).

    [Edit:] Apparently, if a bookmarklet evaluates to anything other than undefined, the inner html of the website is replaced by a string representation of that value. To make sure that the bookmarklet evaluates to undefined, you can just type undefined as the last line outside of any condition block. unfortunately that means it is less likely that my assumption toward OP’s error is correct but at least future visitors still might find this information usefull.

  2. It looks like the code you use in console works ok.

    It seems like the method you turn console code into a bookmarklet is what might result into an error.

    The basic IIFE-construction, i.e. Immediately Invoked Function Expression, looks like this:

    javascript:(function () {
    /*code here*/
})();

    Therefore, the code that is supposed to work might be this.

    javascript:(function () {
    document.getElementById('metakeyselect').value = "foo";
    document.getElementById('metavalue').value = "bar";
    document.getElementById('meta-add-submit').click();
})();

    Does it solve your problem?