I have a table cell which has 2 span elements in it:
<span contentEditable=true class="editspan"></span>
<span class="pencilspan glyphicon glyphicon-pencil pull-right"></span>"
When I click on span1 I get an input box which I can edit. I want to force a click on span1 if I click on span2 (edit glyphicon). How can I do this?
If I understand you correct, if you click span 2, then you want it to click on span 1 also?
$('.pencilspan').click(function() {
alert("pencilspan is clicked")
$('.editspan').click();
alert("editspan is automatic clicked")
});
$('.editspan').click(function() {
$('<input placeholder="box created by editspan"/>').appendTo('body')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="editspan">span 1</span><br>
<span class="pencilspan glyphicon glyphicon-pencil pull-right">span2</span><br>
This should give you an idea about it.
Updated with your spans, Only added some text inside for the visible effect
Related
How to increment digit of the span by one every time i click on the button, if i click button 1 then span 1 should be incremented and so on ?
button 1:
button 2:
button 3:
span 1: <span class="item-count">1</span>
span 2: <span class="item-count">1</span>
span 3: <span class="item-count">1</span>
Anchors are best for URLs and anchors (ie #pagesection). In this use case buttons are the better options.
In this answer, I give each button a data-target attribute. The value of this attribute is the ID of the element that you want to change.
I'm delegating the click handler to the body and just checking to see if what was clicked on was one of the buttons. Then I simply get the target span and its value and add 1.
document.body.addEventListener("click",(e) => {
let el = e.target;
if(el.classList.contains("add-menu-btn")){
let target = document.querySelector(el.dataset.target);
target.innerText = Number(target.innerText) + 1
}
});
<button data-target="#span1" class="add-menu-btn">1</button>
<button data-target="#span2" class="add-menu-btn">2</button>
<button data-target="#span3" class="add-menu-btn">3</button>
<span id="span1" class="item-count">1</span>
<span id="span2" class="item-count">1</span>
<span id="span3" class="item-count">1</span>
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>
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>
I want to test with protractor if a popover pops up. This is the my html. The popover sits in the last child span:
<span tariff-popover="views/popovers/c2g/airport.html" class="ng-isolate-scope">
<span ng-transclude="">
<span class="ng-scope">
Flughafenpauschale
</span>
</span>
<span popover-placement="right" popover-template="text" popover-trigger="mouseenter" class="fa fa-info-circle">
</span>
</span>
How do I select the last span? I need to select it based on the value of tariff-popover on the parent span. This is how I've tried to selet it:
it('should display the popover-content on mouseover', function() {
var popover = element(by.css('span[tariff-popover=views/popovers/c2g/airport.html] > .fa.fa-info-circle'));
console.log(popover.getInnerHtml());
/* more tests here */
});
The console.log gives me errors as the css selector is wrong. Any suggestions?
There should be quotes around the tariff-popover value. Try with this -
var popover = element(by.css('span[tariff-popover="views/popovers/c2g/airport.html"] > .fa.fa-info-circle'));
And moreover .getInnerHtml() will return a promise. So, you need to wait for it to return a value. Here's how -
popover.getInnerHtml().then(function(val){
console.log(val);
});
Hope this helps.
HI ,
I am using Prototype Javascript for my application .
I am having a Html like
<span style="display: none;">
<span class="fn">
<span class="given-name">NAME</span>
<span class="family-name"> </span>
</span>
<span class="email">email#gmail.com</span>
<span class="tel"></span>
<span class="role">Developer</span>
<a class="underlin" href="/users/username">View</a>
<a class="additional_click" href="">Show Additional Details</a>
<span style="display: none;" class="additional_detail">
Personal Number : 82374894725
</span>
</span>
I am trying a task of when clicking on Show Additional details the span next to that should be displayed and the Innerhtml should be replaced with Hide Additional Details .
And on clicking Hide additional Details , the span (additional_detail) should hide
I have written a Javascript (Prototype) for this
$$(".additional_click").each(function(el){
el.observe("click", function(event) {
event.element().next().show();
el.replace("Hide additional details");
});
});
How to write the Js for on clicking Hide Additional Details to get the span to hide. And to replace the text to Show additional details
In your event function, check if the span was visible. If it was, then hide it and change the text to "Show additional details", and if it wasn't, then show it and change the text to "Hide additional details".
$$(".additional_click").each(function(el) {
el.observe("click", function(event) {
if(el.next().visible())
{
el.next().hide();
el.innerHTML = "Show additional details";
}
else
{
el.innerHTML = "Hide additional details";
el.next().show();
}
Event.stop(event);
});
});
Also remember to stop the event, so that the browser doesn't actually follow the link.