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>
Related
on my screen i am showing a few inputs like this.
<span>
<input #field (keyup.enter)="setName(item,field.value); newfolder = null" type="text" class="top-of-dom folder_name_text_box">
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='category'}" (click)="item.folder_type='category'">single</button>
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='label'}" (click)="item.folder_type='label'">multi</button>
<i class="fa fa-check cursor-pointer top-of-dom" (click)="setName(item,field.value);" aria-hidden="true"></i>
<i class="fa fa-times cursor-pointer top-of-dom" (click)="deleteNode(item.id);"></i>
</span>
all i want to do is when the user losses focus and does not click the check r times icon. an event should be triggered.
In simple words if the user presses anything other than these five elements i want to call an event. I have tried to apply (blur)="SomeMethod" to the span above, but it is useless. And applying it on input tag simply calls the event even if the i in the same group is clicked
use
<span tabindex=0></span>
to ger focus on your span and then you can call blur method.
so basically the blur event fires when the focus is lost. By default, a div or span element cannot have the focus in the first place so it can't be lost.
here if you set tabindex on a span, then it can gain the focus and you call your function on blur. this also works with tab key press event.
for more check this fiddle
it is done in core js, not on angular but you can use the same logic in angular refer, try this
document.body.addEventListener("click", function() {
var parents = [];
var p = event.target;
while (p !== document) {
var o = p;
if(o.className.indexOf("input-items") !== -1) break;
p = o.parentNode;
}
if(p === document) {
// your code here
console.log("here");
}
})
<body>
<span class="input-items">
<input #field (keyup.enter)="setName(item,field.value); newfolder = null" type="text" class="top-of-dom folder_name_text_box">
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='category'}" (click)="item.folder_type='category'">single</button>
<button class="top-of-dom" [ngClass]="{'active': item.folder_type=='label'}" (click)="item.folder_type='label'">multi</button>
<i class="fa fa-check cursor-pointer top-of-dom" (click)="setName(item,field.value);" aria-hidden="true"></i>
<i class="fa fa-times cursor-pointer top-of-dom" (click)="deleteNode(item.id);"></i>
</span>
<h1> click here </h1>
<h1> click here </h1>
<h1> click here </h1>
<h1> click here </h1>
</body>
Go for
(clickOutside)="something"
on span
check here
<div class="myDiv">
<span class="mySpan">SAMPLE TEXT A</span>
<span class="mySpan">SAMPLE TEXT B</span>
</div>
I'm struggling to get the right javascript to hide "myDiv" if the text in "mySpan" is "SAMPLE TEXT A".
Somehow like this (you will not see anything, because <div class="myDiv"> is hidden already):
var spans = document.getElementsByClassName('mySpan')
for(var i = 0; i < spans.length; i++) {
if(spans[i].innerHTML === 'SAMPLE TEXT A') spans[i].parentElement.style.display = 'none';
}
<div class="myDiv">
<span class="mySpan">SAMPLE TEXT A</span>
<span class="mySpan">SAMPLE TEXT B</span>
</div>
UPDATE
"What is the significance of the 'for' statement?"
document.getElementsByClassName('mySpan') will select ALL elements with class mySpan, think about it as an array. Then i iterate through all selected span's and finding the case, where innerHTML is equal to our specific string.
"In the if statement, how would I specify just the parent div and not every element with class "myDiv"? There are other elements on the page with that class."
If so, you need to use parentElement (I have updated my answer with needed row).
I need to change a text in a span.
<span class="count_bottom">
<i class="blue">
<i class="fa fa-sort-asc"></i>
12%
</i>
From last seen
</span>
I only need to change From last seen text according to button click event.
How can I do this?
Filter out non-empty text nodes inside space and then replace with new content.
$('.count_bottom')
// get all child nodes
.contents()
// filter out non-empty text node
.filter(function() {
// check node type and content
return this.nodeType === 3 && this.nodeValue.trim().length;
// replace it with new content
}).replaceWith('new text');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="count_bottom"><i class="blue"><i class="fa fa-sort-asc"></i>12% </i> From last seen</span>
With pure JavaScript
// get the `i` tag inside `span`
document.querySelector('.count_bottom > i')
// get adjacent text node which is immediately after the element
.nextSibling
// update text content of the text node
.textContent = 'new text';
<span class="count_bottom"><i class="blue"><i class="fa fa-sort-asc"></i>12% </i> From last seen</span>
You can select first i element in span and use nextSibling property to getting next sibling text of it.
$("button").click(function(){
$(".count_bottom > i")[0].nextSibling.nodeValue = "New value";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change text</button>
<span class="count_bottom">
<i class="blue">
<i class="fa fa-sort-asc"></i>
12%
</i>
From last seen
</span>
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
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.