Pass variable with set value to a function in JavaScript - javascript

I have a little span element which I CSSed the f*** out of so that it appears as a switch. It kind of like this:
<Span class="switchbody" value="on"><span class="switchcover">on</span></span>
I wanted to know, if I added an onclick="editswitch()" to the first span element, would it be possible if I passed a Variable containing a unique value so that the JavaScript function knows which switch I am talking about without me having to write a million functions doing exactly the same thing to different elements?
If it is possible, how would I do that
PS I have tried
<span onclick="getId = "switch one";">
If it is possible, no jquery or php, etc. Just JavaScript.

Use this to refer to the object that fired the event. For example:
function editswitch(me) {
alert(me.id);
}
<span id="span1" onclick="editswitch(this)">I'm the first span</span>
<br/>
<span id="span2" onclick="editswitch(this)">I'm the second span</span>

Related

Removing Child Elements in Javascript

I know this has been extensively answered but alas I have had no luck with previous code.
So I want to remove all the span elements in this div element when the user onclicks a button.
THE HTML
<div id="sequence-label" class="scrollingDiv" style="visibility: hidden;">
<li>H :</li>
<span class="spanUnselected">T</span>
<span class="spanUnselected">F</span>
<span class="spanUnselected">G</span>
<span class="spanUnselected">Q</span>
<span class="spanUnselected">G</span>
</div>
**THE JS **
$('#sequence-remove-pdb').click(sequenceRemovePdb);
function sequenceRemovePdb() {
document.getElementById("sequence-label").style.visibility = "hidden";
workspaceSideChain();
var mySeq = document.getElementById("sequence-label");
}
Things I have tried
Tried to remove all the elements as children of sequence-label
mySeq.empty();
Tried to remove by class selected
mySeq.remove(".spanUnselected");
Tried to remove by firstChild Elements
while (mySeq.firstChild) {
mySeq.removeChild(mySeq.firstChild);
}
Tried to remove by childNodes also over how many elements are in sequence-label and still nothing.
Any ideas?
The Problem
You're mixing jQuery and vanilla javascript in a way that does not work.
Specifically, you're getting an element in vanilla javascript here:
var mySeq = document.getElementById("sequence-label");
Then you are trying to remove elements using jQuery:
mySeq.empty();
and
mySeq.remove(".spanUnselected");
The Solution
The solution is simple enough. Get the element as a jQuery object first, then your functions will work:
var mySeq = jQuery("#sequence-label");
// Then act on it with jQuery as you see fit.
mySeq.find('.spanUnselected').remove();
Also, be sure your event bindings take place inside of a document ready:
jQuery(function($) {
$('#sequence-remove-pdb').click(function() {sequenceRemovePdb;});
});
I might be missing the point but to completely empty the item this might work:
document.getElementById("sequence-label").innerHTML = "";
It will empty out all the children (actually everything) from inside the "sequence-label" element.
Try this code :
$('#sequence-remove-pdb').click(function(){
$('span.spanUnselected').remove();
});
HTML :
<div id="sequence-label" class="scrollingDiv">
<li>H :</li>
<span class="spanUnselected">T</span>
<span class="spanUnselected">F</span>
<span class="spanUnselected">G</span>
<span class="spanUnselected">Q</span>
<span class="spanUnselected">G</span>
</div>
The remove( expr ) method removes all matched elements from the DOM.
This does NOT remove them from the jQuery object, allowing you to use
the matched elements further.
JSFIDDLE LINK

How to make a list of same elements which have common attributes values either using nightwatch.js or javascript?

I am working in nightwatch.js for automation testing for a web application, i am struggling to make a list of elements which has common values in their attributes, i am writing sample of elements as following.
first three spans with common value of attribute: "data-annotation-id"
<span class="my-note" data-annotation-id="580ss7ze8457f65119v54g32">first span</span>
<span class="my-note" data-annotation-id="580ss7ze8457f65119v54g32">second span</span>
<span class="my-note" data-annotation-id="580ss7ze8457f65119v54g32">Third span</span>
Above span attribute (data-annotation-id) value is: "580ss7ze8457f65119v54g32"
second two spans with common value of attribute: "data-annotation-id"
<span class="my-note" data-annotation-id="569dd7fe6092b62008b73b49">Fourth span</span>
<span class="my-note" data-annotation-id="569dd7fe6092b62008b73b49">Fifth span</span>
Above span attribute (data-annotation-id) value is: "545yd6gd8265g7584g5s25"
i tried following way to make collection of all spans which have common values of data-annotation-id attributes but its not working.
client.getText('.my-class', function(result) {
client.expect.element('.my-class').to.have.attribute('data-attr').which.matches(/^something\ else/);
});
following syntax will not work because i don't know the value of data-annotation-id. so is there any way to get the desired result using either Nightwatch.js or javascript ?
client.expect.element('.my-class').to.have.attribute('data-attr').which.matches(/^something\ else/);
I have done using following line of code.
//using this line we are getting the number of spans in page.
client.elements('css selector','.my-class', function (noted) {
//on the basis of the number of noted i am finding attribute which has same value.
noted.value.forEach(function (index) {
client.getAttribute('.my-class', 'data-annotation-id', function(results) {
console.log(results.value)
});
});
});

Use jQuery to set Focus on input before span

I have the following bootstrap html:
<div class="input-group">
<input id="dbTest" class="input-sm input-s datepicker-input form-control dirty" type="text" data-bind="datepicker:DOB" data-date-format="dd-mm-yyyy" readonly="readonly">
<span class="input-group-addon" id="dp3"><i class="fa fa-calendar"></i></span>
</div>
The data-bind is a knockout extension which is all working well and when the focus is on the input all the datepicker works. I created a test for this like so:
$("#dp3").click(function () {
$("#dbTest").focus();
});
What I want to achieve though is the ability to create a global function for the addon button for any other datepickers I create so that I don't have to add ids and a function for every datepicker I create. For example I would want to add say a class called datepicker-addon:
<span class="input-group-addon datepicker-addon" id="dp3"><i class="fa fa-calendar"></i></span>
And then do something like:
$(".datepicker-addon").each(function() {
$(relevant input).Focus();
});
Any ideas on how I could get the relevant input element?
Not sure I fully understand, but given your markup if you are trying to focus on the input without id's etc you could use
$(".datepicker-addon").each(function() {
$(this).parent().find('input').Focus();
})
N.B. as someone mentioned, you might of meant click() in your question rather then each(), in which case
$(".datepicker-addon").on('click', function() {
$(this).parent().find('input').Focus();
})
is what you'd want.
if the span and input are next to each other I would use jquery .prev() function instead of parent then find.
http://api.jquery.com/prev/
$(".datepicker-addon").each(function() {
$(this).prev().Focus();
})
.prev looks at the html elemnet immediatly before the current element.
.prev vs .parrent matters solely on your html structure. Is the input always right before the datepicker? Is there always only one input inside the parent element of the datepicker
The former would seem a much better constraint than the latter from an outsiders perspective.
Assuming that your input tag:
always has class 'datepicker-input'
always comes before span with addon button
you can use following code:
$('.input-group-addon').click(function(){
$(this).prev('.datepicker-input').focus();
});

I need to find the next element that is not a sibling

Let's say I have following HTML:
<span>
<span id="x1" class="x">X1</span>
</span>
<span>
<span>
<span id="x2" class="x">X2</span>
</span>
</span>
And $(this) is the <span id="x1" ...>.
What is the best way to find next element matching .x with jQuery?
The structure of the actual document is unpredictable, so the HTML provided is only an example.
I can't use nextAll as it only finds siblings.
If I do $('.x'), it finds all, but I'll have to iterate/compare.
Is there a better solution?
See also: http://jsfiddle.net/JZ9VW/1/.
Given that you seem to be unwilling to make assumptions about the structure of the markup, a class-based selector is best. If elements aren't being added/removed then you can select them once and keep them around as an optimization.
var exes = $('.x');
var x1 = $('#x1');
var nextEx = exes.eq(exes.index(x1) + 1);
http://jsfiddle.net/mattball/QKawu
With a truly unpredictable HTML structure, asking for "the next element" only makes sense in the context of "the collection of elements with the specified class name," which is exactly what the above code reflects.
Find the parent, then get the parent's next sibling, then find the class.
.parent().next().find('.x')

What is the line mean? "this.parentNode.firstChild.nodeName" in jQuery Hilghlight plugin

What is the use of the line
this.parentNode.firstChild.nodeName
in following code from jQuery Highlight plugin.
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
jQuery.fn.removeHighlight = function () {
return this.find("span.highlight ").each(function () {
this.parentNode.firstChild.nodeName;
with(this.parentNode) {
replaceChild(this.firstChild, this);
normalize();
}
}).end();
};
this.parentNode.firstChild.nodeName is not assigning its value to any variable. Basically it's a property not a function, so it won't make any effect. Looks pointless. It should find out parentNode of current node, then firstChild node of that parentNode and then get its nodeName. But in this case it's not getting used anywhere in the code snippet you provided
Consider the following eg:
<span class= "highlight">...</span>
<span class= "highlight">...</span>
<span class= "highlight">...</span>
<span class= "highlight">...</span>
....
Now there are multiple spans with the same class name.
If you try to highlight ONE of these spans the jquery is fired.
Now which span to highlight is based on this.parentNode.firstChild.nodeName;
this refers to the span which has a request for highlight and the remaining is just internals inside the span.
this.parentNode.firstChild.nodeName
This gets the tag's name (if it's an element, see RobG's comment) of the first sibling in reference to this.
Because it is not being assigned, it is weird. If it's being called for a side effect (perhaps to fix a browser bug), it's not clear (it should be commented).
That plugin's code is kind of weird.

Categories