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.