How to click on an element of a website with javascript bookmarklet? - javascript

what i want to do is to click on this icons (there are like 16 per website, one by one, click the first, go to the next available, etc....
To understanding...
And sometimes it has this other eye icon: (it changes the code a bit)
I know we could do it from the console, but for comfort i would prefer to do this from the bookmarks (adding the code to a bookmark, then click it when i need it)
So, what i know (thanks to #Sphinx) is that we have to write in a bookmarkletjavascript:$("span.icon.icon_eye").click() but the main problem is that when i click it, it clicks the first icon eye, and i need to click first the 1st eye icon, then the second, then the third, etc...

Based on your comments, below codes should be what you need.
bind click event for all span.icon_eye.
Click each <span class="icon icon_eys"> second by second (setTimeout).
function clickSomething() {
$('span.icon.icon_eye').on('click', function(){console.log('You clicked', $(this).html())});
$('span.icon.icon_eye').each(function(index){setTimeout(()=>{$(this).click()}, index*1000);});
}
setTimeout(clickSomething, 1000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="icon icon_eye">A</span>
<span class="icon icon_eye">B</span>
<span class="icon icon_eye">C</span>
<span class="icon icon_eye">D</span>
<span class="icon icon_eye">E</span>
<span class="icon icon_eye">F</span>
</div>

try:
var currentBookmark = $($('.icon_eye').get(0));
var bookmarkClicker = function() {
console.log('you clicked bookmark at ' + currentBookmark.text());
setTimeout(function() {
currentBookmark = currentBookmark.next('.icon_eye');
if (currentBookmark) {
currentBookmark.on('click', bookmarkClicker);
currentBookmark.click();
}
}, 500);
};
currentBookmark.on('click', bookmarkClicker);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="icon icon_eye">A</span>
<span class="icon icon_eye">B</span>
<span class="icon icon_eye">C</span>
<span class="icon icon_eye">D</span>
<span class="icon icon_eye">E</span>
<span class="icon icon_eye">F</span>
</div>

Related

Remove input by clicking times icon

I have the following code which adds divs within a container (#subtask_container) via clicking a link (similar to Google Tasks):
HTML:
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>
JS (this successfully adds unique inputs within the subtask container div along with a clickable x after each input)
var i = 1
$("#add_subtask").click(function () {
$("#subtask_container").append('<input name="subtask'+i+'" class="mt-1" id="subtask'+i+'" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted"></i><br>');
i++;
});
What logic do I need to add to the x class to remove it's associated input?
I've tried
$('.fa-times').click(function(){
$(this).prev('input').remove();
});
but it doesn't seem to work...
Thanks!
You can simply wrap your subtask append in a div and simply use .parent() and .remove() function on that. No need to use <br>
Also, do not use .fa-times as primary click event handler as you might have other fa-times on the same page as well Which might cause issues later on. Add a custom class to your fa item (.subtask_remove_icon)
Live Demo:
var i = 1
$("#add_subtask").click(function() {
$("#subtask_container").append('<div><input name="subtask' + i + '" class="mt-1" id="subtask' + i + '" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted subtask_remove_icon"></i></div>');
i++;
});
$(document).on('click', '.subtask_remove_icon', function() {
$(this).parent().remove(); //remove the input when X clicked
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>
The event handler gets attached to all elements that are on the page load. Since the icons are appended, the right way to do this would be the following:
var i = 1
$("#add_subtask").click(function () {
$("#subtask_container").append('<div><input name="subtask'+i+'" class="mt-1" id="subtask'+i+'" placeholder="Enter subtask"><i class="fas fa-times ml-1 text-muted removeIcon"></i><br></div>');
i++;
});
$(document).on('click', '.removeIcon', function(){
$(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<p class="text-muted">
<i class="fas fa-tasks mr-2"></i>
Add subtasks
</p>
<div id="subtask_container"></div>

How to change a list of multiple images on hover

I have a list of images and I want to be changed when I hover on it and then change back to the previous image on mouse leave. and each image is different. I have done it but the event is being executed on two images only when the mouse hovers on the first item. and I couldn't figure out the right way.
//html code//
<li>
<div class="card">
<img class="my-img" id="my-img1" src="./images/AMH010301_G-1-dresslink.jpg" alt="Denim Jeans">
<h1>Lorem1</h1>
<span class="price-first">$24.99</span>
<span class="price">$17.99</span>
<br>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<p>Lorem ipsum dolor sit amet..</p>
<button class="add-to">Add to Cart</button>
</div>
</li>
<li>
<div class="card">
<img class="my-img" id="my-img2" src="./images/AMH010327_W-1-dresslink.jpg" alt="Denim Jeans">
<h1>Lorem2</h1>
<span class="price-first">$24.99</span>
<span class="price">$14.99</span>
<br>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<p>Lorem ipsum dolor sit amet..</p>
<button class="add-to">Add to Cart</button>
</div>
</li>
//JavaScript//
let img = document.querySelectorAll('.card img');
for (var i = 0; i < img.length; i++) {
img[i].addEventListener('mouseover', hover);
img[i].addEventListener('mouseout', leave);
}
function hover() {
document.getElementById("my-img1").src = "./images/AMH010301_G-5-dresslink.jpg";
document.getElementById("my-img2").src = "./images/AMH010327_W-5-dresslink.jpg";
}
function leave() {
document.getElementById("my-img1").src = "./images/AMH010301_G-1-dresslink.jpg";
document.getElementById("my-img2").src = "./images/AMH010327_W-1-dresslink.jpg";
}
First it seems you are only attaching your event to one of the images and not both. The code below will loop through all of the images and attach event to them.
let img = document.querySelectorAll('.card img');
for (var i = 0; i < img.length; i++)
{
img[i].addEventListener('mouseover', hover);
img[i].addEventListener('mouseout', leave);
}
Second the event that you are attaching to the images does not look at which image is being hovered it just changes the images for both of them. The following code will look at the image that you are hovering over and only modify that.
function hover(e) { e.target.src = e.target.getAttribute("data-hover-img"); }
function leave(e) { e.target.src = e.target.getAttribute("data-leave-img"); }
Finally for each image to have different images to change to and from on and off hover you need to store that information somewhere connected to the image. I chose to go with data attributes as seen above. So the HTML for your images should look like this.
<img class="my-img" id="my-img1" src="./images/AMH010301_G-1-dresslink.jpg" data-hover-img=""./images/AMH010301_G-5-dresslink.jpg"" data-leave-img="./images/AMH010301_G-1-dresslink.jpg" alt="Denim Jeans">
<img class="my-img" id="my-img2" src="./images/AMH010327_W-1-dresslink.jpg" data-hover-img="./images/AMH010327_W-5-dresslink.jpg" data-leave-img="./images/AMH010327_W-1-dresslink.jpg" alt="Denim Jeans">
On every iteration you select the same image....
document.querySelector('.my-img') <-- selects first image with the class
So you just bound mouseover to the first image multiple times. Now if you fixed the loop to select the correct image, you still would have an issue because your hover code does not look know what image you are hovering and you change all of the images inside of the method.
So you could add in logic into the hover or you could just simplify your code.
So what you want to do is when you hover over an image it changes to a different image. One of the easiest things to do is to use data-attributes and a mouse events.
document.querySelectorAll('[data-src2]').forEach(function (img) {
img.addEventListener('mouseenter', function() {
if (!img.dataset.src) { // see if we hovered yet
img.dataset.src = this.src // if not set orginal source so we can flip back
}
img.src = this.dataset.src2 //set src to second image
})
img.addEventListener('mouseleave', function() {
img.src = this.dataset.src //set back to orginal
})
})
<img src="https://placekitten.com/200/300" data-src2="https://placekitten.com/g/200/300" />
<img src="https://placekitten.com/200/200" data-src2="https://placekitten.com/g/200/200" />
Are you asking how to register the eventlisteners and be able to backtrack which element fired the event? Something like:
img[i] = document.querySelector('.my-img').addEventListener('mouseover', function() { theselectedElement=i; hover();});
(2 statements- one for the event and another for the element) and then process the events depending on the selected element?

How to click a button using html or java script which is declared as div

I am writing a powershell script to login to a website. I want to use the button.click functionality but I can't find the button's id. here is what I found by inspecting it.
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>
Thanks in advance
Given that you aren't sure which one is the one you want, you could just set up an event handler that will trigger for each and then interrogate it for something that can identify it.
// Get all the elements with a class of "v-button-caption" into an array
var buttons = Array.prototype.slice.call(document.querySelectorAll(".v-button-caption"));
// Loop over the array
buttons.forEach(function(btn){
// Set up a click event handler
btn.addEventListener("click", function(evt){
// Print out some identifying information about the clicked element
console.log("You clicked the element who's parent is: " + evt.target.parentElement.nodeName);
});
});
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>

Find element and see if its active/hasClass

I am trying to access a button in my leaflet map. The button is created using a plugin "easy-button".
My main goal is to see if the button has been clicked (is active), I will use it for validation in another function, not shown here.
This is how the html for the button looks like in the browser debugger (I believe the html is created by the plugin?).
Before it's clicked
<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair">
<span class="button-state state-add-markers add-markers-active">
<span class="fa fa-crosshairs fa-lg"></span>
</span>
</button>
After it's clicked
<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair">
<span class="button-state state-remove-markers remove-markers-active">
<span class="fa fa-undo"></span>
</span>
</button>
This click function access the button and show 'Button was clicked' but the if statement does not pass. I got to the button using Copy CSS path in the browser, but it seem really long.
$("div.leaflet-bar.easy-button-container.leaflet-control > button > span").click(function(){
alert("Button was clicked");
if
($('span').hasClass('fa fa-crosshair fa-lg'))
{
alert('My button has active class')
}
});
Any advice on what I am doing wrong?
This
if($('span').hasClass('fa fa-crosshair fa-lg'))
Will not target the span you are expecting it to.
You wanted
if($('span',this).hasClass('fa fa-crosshair fa-lg'))
To target the child span of the span you clicked on
Run this example, hope it helps:
$(document).ready(function() {
// My example to trigger the click on buttons..
$("button > span > span").click(function(){
alert("Button was clicked");
if (
//$(this).hasClass('fa') && <-- You don't need it, both have it
$(this).hasClass('fa-crosshairs') &&
$(this).hasClass('fa-lg')
) {
alert('My button has active class');
} else {
alert('Ops..');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Unclicked -->
<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair">
<span class="button-state state-add-markers add-markers-active">
<span class="fa fa-crosshairs fa-lg">click me</span>
</span>
</button>
<!-- Clicked -->
<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair">
<span class="button-state state-remove-markers remove-markers-active">
<span class="fa fa-undo">clicked</span>
</span>
</button>

angularJS : disable link based on variable value, and display message box

I am struggling to figure out how to disable a ng-click event based on the value of a boolean variable.
I have a form, on which the user has to click a (+) sign/ link to add a new record, when the user does this, a small function is triggered, and sets a boolean to false.
Code:
vm.addNewRecord = function (formClass) {
vm.hasID = false;
};
The form has an icon/ link that allows the user to save information about participant, to the record.
Code:
<div class="icon">
<a ng-click="addParticipants(data)">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
That issue is that this information depends on a record id, but this id does not exist yet.
I need to be able to disable the ng-click of: addParticipants(data) is the value of hasId = false, and at the same time (somehow) allow the user to click it to display a message in the lines of: "Please save this record before adding participants."
What I have tried so far, and without success:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-disabled="!hasID">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
And:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-class="{'disabled': !hasID}">>
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
I checked the value of hasID and it is false but I am still able to click on the (+) sign for addParticipants. And also, I am not sure how if I manage to disable the click, I am going to display the message instructing the user to first save the main record and then adding participants will be possible.
If anyone could offer some help to resolve this, that would be much appreciated.
Thank you.
To disable a link you can do like
<a ng-click="hasID && datagrid.add(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>
But it's much better to have a method inside your controller like
vm.addToGrid = function(id) {
if (id) {
$scope.datagrid.add(id);
} else {
alert('Save the record before');
}
}
<a ng-click="vm.addToGrid(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>

Categories