In search of an effortless method to effortlessly select numerous elements using a handy bookmarklet

My goal is to develop a bookmarklet that can perform various functions on different webpages with ease. The concept involves placing it in a convenient location, such as the bookmark bar, and executing a "standard function" on a particular page. Instead of searching for a hyperlink or submit button, I can rely on the bookmarklet to carry out its task.

Despite not being proficient in JavaScript, I am facing challenges when attempting to make the bookmarklet work across multiple items/pages. Initially, I achieved success using the getElementById function like this:

javascript:(function () {
var i = document.getElementById("contactSeller").click()
})()

However, on another page where there is a button with the ID "sndBtn", adding another click() function to the code did not yield the desired result:

javascript:(function () {
var i = document.getElementById("contactSeller").click();
var m = document.getElementById("sndBtn").click()
})()

It appears that the issue lies in the fact that getElementById can only be used once on a page. (Removing the first function allows the second one to work). Some users have recommended employing recursive functions with CSS or jQuery, but I struggled with implementing them effectively as bookmarklets.

I am seeking assistance in creating a simple function that can iterate through a list of clicks. It would be beneficial to have the capability to follow hyperlinks, submit forms, and click buttons – essentially, more than just a repetitive script of the same function. Each element on every page seems to possess unique IDs.

Links GetElementByID - Multiple IDs

https://gist.github.com/aseemk/5000668

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Answer №1

There are no restrictions on how many times you can use the getElementById method. If the element does not exist, it may trigger an exception that halts your script. Attempting to call .click() on a null object will cause issues.

To avoid errors, you can first confirm the element's presence before attempting to click:

javascript:(function () {
var elem1 = document.getElementById("contactSeller"); 
if(elem1){elem1.click();}
var elem2 = document.getElementById("sndBtn");
if(elem2){elem2.click();}
})()

Answer №2

Completed an example and it's functioning well, take a look.

I agree with @Rich Moss' statement that

document.getElementById("contactSeller")
is undefined or there's an error in the click function causing the code to stop running.

function outputValue(v){
console.log(v)
}

document.getElementById("btn1").click()
document.getElementById("btn2").click()
<input type="button" onclick="outputValue(1)" value="btn1" id="btn1" />

<input type="button" onclick="outputValue(2)" value="btn2" id="btn2" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage jQuery to automatically submit an ajax form once all ajax requests have been successfully executed

I have integrated a WordPress plugin for store locator on my website. For pages without the interactive map, I have set up a form that serves as a location search tool. To clarify, the form includes a location field where users can input their desired loc ...

Is it possible to reference a .js file within an HTML file using AngularJS?

Having a slight issue with an email function. I experimented with the 'nodemailer' package and successfully sent an email when coding in a .js file. Upon calling the .js file (node emailfile.js), the email was received as expected (code provided ...

Dispatching identification to controller after submission

I am encountering an issue with a page that contains the following code: <div class="col-sm-2 displaybutton"> <div data-point-to="displaysHeader"> @using (Html.BeginForm("Administration", "Home", FormMethod.Post)) ...

I'm having an issue with my Bootstrap tabs - they seem to be unresponsive when clicked

I've been working on a Bootstrap website and have run into some issues that I can't seem to resolve. One problem I encountered was with a set of tabs that were supposed to be interactive, but for some reason, they weren't working as expected ...

Preserve data across all pages using sessions

On my website, I have a pagination system where each page displays 10 data entries. Whenever a user clicks on the pagination buttons, it triggers a request to the database to fetch the corresponding records. Each data entry also includes a button that can ...

Using JQuery to eliminate the current div in an image slider

I currently have an image slider that allows users to switch between images. There are two buttons - one adds a new item to the slider, while the other is supposed to remove the current image from the slider, but it doesn't seem to be working properly ...

Employing the findOne method repeatedly in a loop can significantly slow down operations in Node.js

Currently, I am working on a project using Node.js in conjunction with MongoDB, specifically utilizing Monk for database access. The code snippet I have is as follows: console.time("start"); collection.findOne({name: "jason"}, function(err, document) { ...

When trying to search for 'elForm' using the 'in' operator within the context of a "datetime" type, the error "Unable to find 'elForm' in undefined" occurs

I am attempting to implement a datepicker with time options from Element UI. I am encountering an issue within the ElementUI component. It functions correctly if the type option is set as date, but throws an error with datetime. Below is my code snippet an ...

Issue with MVC 4 Asynchronous File Upload: Controller Always Receiving Null Value

I'm encountering an issue while attempting to upload a file asynchronously from ajax to my controller. I am passing 3 variables - PictureId, PictureName, and PictureFile. The problem specifically lies with the "PictureFile" variable as it consistently ...

Tips for sharing data between React components without causing re-renders or relying on JSX, such as through a function within functional components

As a beginner in react, I have been struggling to find answers to this issue. I am trying to figure out how to pass data from one functional component to another in react without actually rendering the child component. Does anyone know a solution for this ...

What is the best way to create a toggle button that can show more or show less of a text snippet with animation?

Is it possible for someone to assist me with showing a long text partially and providing a "show more" button to reveal the rest, along with a "show less" option, all with some CSS animation? I was thinking of using a font awesome arrow down icon for expan ...

Issue with AngularJS in Internet Explorer 7: "querySelector" property or method not supported by object

Incorporating angularjs into an existing asp.net project has presented a challenge due to the project's dependency on IE 7 compatibility mode. Upon running the project, an error from the angularjs file was encountered: Object doesn't support pro ...

Utilizing AngularJS to calculate elapsed time and continuously update model and view accordingly

Situation Currently, I am interested in developing a web application that tracks a specific data set based on the time since the page was loaded. For example, "how many calories have you burned since opening this webpage?" I am still trying to grasp the ...

Angular Material 2 with Customized Moment.js Formatting

Is there a way to display the year, month, day, hours, minutes, and seconds in the input field of my material datepicker? I have successfully customized the parse() and format() methods in my own DateAdapter using native JavaScript objects. Howe ...

Issue: Headers cannot be set after they have been sent. This is a problem in node.js

I'm trying to create an application that allows users to execute commands via a URL, but I keep encountering this error message: _http_outgoing.js:346 throw new Error('Can\'t set headers after they are sent.'); ^Error: Can't ...

Refreshing html in nodejs after a fetch promise remains in a pending state

I am facing an issue with the `then` method in Express and Node.js as it is logging a promise that remains pending. edit().then(data => console.log(data)); Below is the code for the edit function: async function edit(data, id) { let response = aw ...

Tips for avoiding Client DOM XSS vulnerability in JavaScript

Upon completing a checkmarx scan on my code, I received the following message: The method executed at line 23 of ...\action\searchFun.js collects user input for a form element. This input then passes through the code without proper sanitization ...

The random number generator in TypeScript not functioning as expected

I have a simple question that I can't seem to find the answer to because I struggle with math. I have a formula for generating a random number. numRandomed: any; constructor(public navCtrl: NavController, public navParams: NavParams) { } p ...

Transmit a message from the background.js script to the popup window

Currently, I am looking to integrate FCM (Firebase Cloud Messaging) into my chrome extension. After conducting thorough research, I have discovered that the most efficient way to implement FCM is by utilizing the old API chrome.gcm. So far, this method has ...

I'm wondering how I can design a utility function within my Redux module that can extract a specific subset of read-only data from the current state

I am currently utilizing redux to create a "helper function" inside my redux module that is responsible for fetching filtered data from the state based on a specified index. This specific data will be used to generate a form consisting of inputs depending ...