CODEWITHSUNDEEP
javascriptbookmarklet
Dan V
Dan V

Reputation: 393

Uncaught TypeError: e is not a function on a JS function for a bookmarklet

I'm sort of new to JS and bookmarklets.

I'm modifying some existing code; which is written like this (I'm oversimplifying the actual code for the education purposes):

  javascript: 1 && function(e) {
    var t = "";
    t += "<style>",
    t += ".somestyle-header{ background-color: #0171C5 !important }",
    t += "</style>",
    t += '<div class="somestyle-header">Test</div>',
    t += "";
    e("body").append("<div id='something'> </div>"), e("#something").append(t)
  }($myvariable);

Now, this currently works and it creates a DIV called "something" and then appends everything on variable "t" to it. In other words it adds whatever is on variable "t" to the HTML of the current site (given that the site has the $myvariable set somewhere).

I'm trying to do something similar, but I have the following questions:

  1. How can I remove that 1 at the very begining of the function and make it work?
  2. How can I make it work on every page?, regardless of the $myvariable at the end being present or not.

Also, if someone can explain what that 1 at the very beginning and that $myvariable at the very end are doing and why this code doesnt work if I remove any of those parts?

I was hoping I can do something like this:

javascript: (function() {

  if (!($ = window.jQuery)) {
      script = document.createElement( 'script' );
      script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; 
      script.onload=launchTheSplash;
      document.body.appendChild(script);
  } 
  else {
      launchTheSplash(e);
  }

  function launchTheSplash(e) {
    var t = "";
    t += "<style>",
    t += ".somestyle-header{ background-color: #0171C5 !important }",
    t += "</style>",
    t += '<div class="somestyle-header">Test</div>',
    t += "";
    e("body").append("<div id='something'> </div>"), e("#something").append(t)
  }
}());

So that:

  1. I check for the existence of JQuery
  2. I launch my bookmarklet regardless of the existence of the $myvariable

But my code doesn't seem to work at all if I remove the 1 at the beginning or the $myvariable at the end. If I do that I get an Uncaught TypeError: e is not a function

Hope this is clear enough. Thanks in advance!

Edit:

I've tried the suggestion below:

javascript: (function() {

  if (!($ = window.jQuery)) {
      script = document.createElement( 'script' );
      script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'; 
      script.onload=launchTheSplash();
      document.body.appendChild(script);
  } 
  else {
      launchTheSplash();
  }

  function launchTheSplash(e = $) {
      var t = "";
      t += "<style>",
      t += ".somestyle-header{ background-color: #011515 !important }",
      t += "</style>",
      t += '<div class="somestyle-header">Test</div>',
      t += "";
      e("body").append("<div id='something'> </div>"), e("#something").append(t);
    }
}());

But it doesnt seem to work on certain pages; for example -if I try to run the bookmarklet in www.apple.com website it comes back with Uncaught TypeError: e is not a function

Any ideas appreciated! Thanks again!

Upvotes: 1

Views: 26067

Answers (1)

Ashvin777
Ashvin777

Reputation: 1482

In order to execute functions immediately, you can use IIFE(https://developer.mozilla.org/en-US/docs/Glossary/IIFE). The correct syntax to execute functions immediately is -

(function(text){
  console.log(text);
})('Hello World')

In your case e is supposed to be jquery element, so whenever you are calling launch function you should pass $ in it.

Take a look at this snippet - https://jsitor.com/E8JW18YD-

Upvotes: 1

Related Questions