Chapter 6. Issue in Bookmarking

[Vikuuu]

As I click on Bookmark it this error shows up

and then it is not working as intended and i don't know what to do.

This is the bookmarklet.js code:

const siteUrl = "//127.0.0.1:8000/";
const styleUrl = siteUrl + "static/css/bookmarklet.css";
const minWidth = 250;
const minHeight = 250;

// load CSS
var head = document.getElementsByTagName("head")[0]; // Get HTML head element
var link = document.createElement("link"); // Create new link Element
link.rel = "stylesheet"; // set the attributes for link element
link.type = "text/css";
link.href = styleUrl + "?r=" + Math.floor(Math.random() * 9999999999999999);
head.appendChild(link); // Append link element to HTML head

// load HTML
var body = document.getElementsByTagName("body")[0];
const boxHtml = `
  <div id="bookmarklet">
    <a href="#" id="close">&times;</a>
    <h1>Select an image to bookmark:</h1>
    <div class="images"></div>
  </div>`;
body.innerHTML += boxHtml;

function bookmarkletLaunch() {
    const bookmarklet = document.getElementById("bookmarklet");
    var imagesFound = bookmarklet.querySelector(".images");

    // clear images found
    imagesFound.innerHTML = "";
    // display bookmarklet
    bookmarklet.style.display = "block";

    // close event
    bookmarklet.querySelector("#close").addEventListener("click", function () {
        bookmarklet.style.display = "none";
    });

    // find images in the DOM with the minimum dimensions
    var images = document.querySelectorAll(
        'img[src$=".jpg"], img[src$=".jpeg"], img[src$=".png"]'
    );
    images.forEach((image) => {
        if (
            image.naturalWidth >= minWidth &&
            image.naturalHeight >= minHeight
        ) {
            var imageFound = document.createElement("img");
            imageFound.src = image.src;
            imagesFound.append(imageFound);
        }
    });

    // select image event
    imagesFound.querySelectorAll("img").forEach((image) => {
        image.addEventListener("click", function (event) {
            const imageSelected = event.target;
            bookmarklet.style.display = "none";
            window.open(
                siteUrl +
                    "images/create/?url=" +
                    encodeURIComponent(imageSelected.src) +
                    "&title=" +
                    encodeURIComponent(document.title),
                "_blank"
            );
        });
    });
}
// launch the bookmarklet
bookmarkletLaunch();

Please help.

[HBarotov]

Hi,

Since JS is alien to me, I just copy-pasted the code from the official repository, and the script just worked. Now comparing your code with the official one, I can see that you've made a few changes:

Your code:

    var images = document.querySelectorAll(
        'img[src$=".jpg"], img[src$=".jpeg"], img[src$=".png"]'
    );

Official code:

    images = document.querySelectorAll('img[src$=".jpg"], img[src$=".jpeg"], img[src$=".png"]');

You can see the difference? There are some more in your code. You can copy-paste the official script and see if it solves the issue.

[mibeon]

Keep track of combination of double and single quotes. Since the js is gonna be embedded into your HTML inside of an anchor tag, there cannot be double of quote types. If it the case, they will interrupt the string accidentally.