Develop Reference

Why can't I change my disabled checkbox to enable?

Simple question, so I made sure to try and a lot of solutions before posting this. I have a checkbox and I can't seem to enable it.
With vanilla JS, I've tried removing the attribute, as well as setting the disabled flag to false, and also using jQuery i've tried to use the Prop to no success.
'''html
<input type="checkbox" id="chkAllowToAdminService" name="chkAllowToAdminService" disabled="disabled" data-init-plugin="switchery">
'''
I've tried the following and none of them are working (vanilla JS and jQuery)
'''
document.getElementById('chkAllowToAdminService').disabled = false;
document.getElementById('chkAllowToAdminService').removeAttribute('disabled);
$('#chkAllowToAdminService').prop("disabled", false);
'''
No error messages at all, just nothing seems to be happening.

To remove attribute you may use removeAttribute(name). In your case:
const checkbox = document.querySelector('#chkAllowToAdminService')
checkbox.removeAttribute('disabled')
To set attribute setAttribute(name, value).

// In jQuery
$('#chkAllowToAdminService').attr('disabled','disabled'); // Add disabled
$('#chkAllowToAdminService').removeAttr('disabled',''); // Remove disabled
// OR
$("#chkAllowToAdminService").attr("disabled",true);
$("#chkAllowToAdminService").attr("disabled",false);
// In JavaScript
document.getElementById("chkAllowToAdminService").disabled = true;
document.getElementById("chkAllowToAdminService").disabled = false;

I think you might have two issue :
make sure you have unique id of element 'chkAllowToAdminService' no other element have same id.
in your remove attribute syntex : document.getElementById('chkAllowToAdminService').removeAttribute('disabled);
I can see quote ' is missing at last.

What can cause click() method to fail?

I have an element (a checkbox), with this HTML:
<button type="button" class="_f_V1 noMargin o365button" aria-labelledby="_ariaId_28" role="checkbox" aria-checked="false">
<span class="_fc_3 owaimg checkboxImage wf-size-checkboxMultiselectSize ms-bg-color-white ms-border-color-neutralSecondaryAlt"> </span>
<span class="_fc_4 o365buttonLabel _fc_2" id="_ariaId_28" style="display: none;"></span>
</button>
Note it's a button element even though it behaves like an <input [type="checkbox"]>.
I aim to select and click on this element with the click() method. The selection is correct, but the click() method fails.
What I did:
document.querySelector('._f_V1.noMargin.o365button').click();
Yet nothing happens - the checkbox won't be checked.
Given this (first) element is but one of a list of similar elements, I've also tried:
(()=>{
document.querySelectorAll('button span').forEach((e)=>{
e.click()
});
})();
Again, neither the first, nor any other checkbox is selected.
From running querySelector() and querySelectorAll() (with their relevant selectors) in console, I get the elements I want (I don't get undefined), so it means my selections are correct.
Given the selections are correct, why would the click() method have no effect?
When I click with the mouse --- the checkbox is checked but when I use click() on the same element, it doesn't.
If you want to try to reproduce online, you need to have an Hotmail email account with messages that you've already deleted. If this is the case:
Go to "Deleted items".
Go to "recover deleted items".
a window will be opened with deleted conversations.
Near to each conversation there will be a checkbox (after mouseover). This is the element I'm having the trouble with.
Note: The mouseover just changes opacity of the checkboxes.

If the question is:
What can cause click() method to fail?
Then the Answer is: Kinda NOTHING! If the click-method is available for an HTMLElement then calling HTMLElement.click() can not "fail" (in that sense). What could happen is that calling click on this element will not have the desired effect/impact - which is the case for the questions author! "just for the sake of completeness..."
After deeper investigation, here is my conclusion.
The actual event handlers that are responsible for checking and unchecking (and all that is related to it) are callbacks "listen to" mousedown-events on these button._f_V1.noMargin.o365button-elements (boot.worldwide.0.mouse.js:37); so you will not get anywhere triggering click-events. One may ask: "how can you say so?". I can say so because I removed ALL other event listeners first traversing up two parents and then from there on all the way down with each and every child element except for the button where I left the mousedown-eventListener. And the functionality was still intact. After removing also this last event listener the functionality was gone. So I guess: yep I can say so :)
My next step was to trigger a mousedown-event on the button like this:
$('._f_V1.noMargin.o365button').each(function() {
$(this).mousedown();
})
But NO this doesn't work.
So what about hysterically triggering events on every maybe-relevant element like this:
var $El = $('._f_V1.noMargin.o365button').parent().parent();
$El.add( $El.find('*') ).each(function() {
$(this).mousedown().mouseup().click();
// may be one event is cancelling the result of another one out
// so I also tried $(this).mousedown()
});
NO - this also doesn't work.
So I came up with my last approach which didn't work either. Let’s mimic the attributes and properties from selected button. BTW the element that is actually responsible for making the "pseudo checkbox" look like checked/unchecked is the first span-childNode of the button-element. So if you type in the following code in the console of your browsers devtool everything will look exactly as it was properly clicked (or mousedowned so to say):
$('._f_V1.noMargin.o365button').each(function() {
$(this).trigger('mousedown').addClass('_f_V1 noMargin o365button _f_W1').attr('aria-checked', 'true').prop('aria-checked', true)
.children(':first').trigger('mousedown').addClass('_fc_3 owaimg ms-Icon--check wf-size-checkboxMultiselectSize ms-bgc-w ms-fcl-nsa-b ms-fcl-ns-b ms-border-color-neutralSecondaryAlt')
.parent().parent().parent().trigger('mousedown').attr('aria-selected', 'true').prop('aria-selected', true)
})
See the screen capture below where I pastet the above snippet straight into devtools console and the "pseudo checkbox" appear as they where clicked.
So what to do now? Ask another question! One that is much more specific. Something like: "How to [recover|deepDelete] all deleted messages in hotmail.com" Because this is what the intent of the question actually is - not sure about it but I guess.
Just want to emphasize this once more: In general the code from OP and also the code in this answer works. It does right, so to say. But it’s not able to achieve what the author wants to achieve.
Additionally here is a proof that the OPs code is actually working:
document.querySelector('._f_V1.noMargin.o365button').addEventListener(
'click', function() { console.log('jepp') }
);
document.querySelector('._f_V1.noMargin.o365button').click();
// BTW: yep HTMLElement.click() returns undefined
console.log(
'yep HTMLElement.click() returns: ',
document.querySelector('._f_V1.noMargin.o365button').click()
)
button {width: 100%; height: 100%; position: fixed}
<button type="button" class="_f_V1 noMargin o365button" aria-labelledby="_ariaId_28" role="checkbox" aria-checked="false">
<span class="_fc_3 owaimg checkboxImage wf-size-checkboxMultiselectSize ms-bg-color-white ms-border-color-neutralSecondaryAlt"> </span>
<span class="_fc_4 o365buttonLabel _fc_2" id="_ariaId_28" style="display: none;"></span>
</button>

function handelClick(){
if(this.getAttribute("aria-checked")=="true"){
this.setAttribute("aria-checked", "false");
}else{
this.setAttribute("aria-checked", "true");
}
}
var button=document.getElementsByTagName('button');
for (var i = 0; i < button.length; i++) {
button[i].addEventListener('click', handelClick);}
goto https://jsfiddle.net/7xnwpgbk/5/
it may help you

You can try it with jQuery
click method which will only work on jQuery collections created like:
jQuery( 'your whatever selector(s) here' ) // form here on you can call .click() now
So for your specific approach you can do:
jQuery('._f_V1.noMargin.o365button').click();
as well as:
jQuery('button span').click();
Since jQuery click method does only trigger an on click event on the first DOM element of a jQuery collection you can combine it with jQuery method each as follows:
jQuery('._f_V1.noMargin.o365button').each(function() {
$(this).click();
});
as well as:
jQuery('button span').each(function() {
$(this).click();
});

by.buttonText('') does not return empty texted buttons as protractor locator

I have to test an application that has some buttons with no text, only graphics (these are < and > buttons on a datepicker, for instance, not in my control).
If I try to find these by:
elm = element.all(by.buttonText(''));
backButton = elm.get(1);
I get no immediate error, but if I say backButton.click() I get:
Error: Index out of bound. Trying to access element at index: 1, but there are only 0 elements that match locator by.buttonText("").
On the other hand if I say
element.all(by.tagName("BUTTON")).filter(function (elem) {
return elem.getText().then(function (text) {
//find the empties
return !(text);
//
});
}).then(function (EmptyButtons) {
EmptyButtons[1].click()
I get a fun error suggesting I found one that I clicked did not pop up yet:
JavascriptError: Element is not currently visible and may not be manipulated (status: 11)
but that is on me to figure out. If I track the text as it comes through the filter, I find there are multiple text-less buttons placed in the array.
I am sorry I do not yet have the skills to generate and test a small example, but I hope perhaps some helpful reader does.
Anyway, I suppose it is possible I am missing something subtle about promise resolution or that the desired behavior is you cannot find a textless button by looking for empty text. I have a workaround, too (actually multiple ones - see my comment below). But I would welcome some clarification here if someone can give it.
Best,
Jeremy Kahan
p.s. I do not see this as a duplicate of "How to click a button with no text in protractor" inasmuch as that wrestles with distinguishing textless buttons, and my question is not how to find and distinguish them, but why searching for text '' does not find them. [My code even suggests how that could have been or could still be implemented, I think.]

From what I understand, you have good workarounds and ways to solve the problem without using by.buttonText and only need an explanation why by.buttonText('') does not work.
If we look into how the by.buttonText is implemented, we would see it first finds only the following "button" variations:
button, input[type="button"], input[type="submit"]
Which means that if the element you are looking for is not the button or appropriate input element, you would not get it matched by the locator.
And, judging by the workaround, the desired elements in your case are actually span elements.
Aside, from that, matching by the empty "button text" should work.
Tested on the datepicker used in our internal application under test - worked for me. Here is how the "<" button looks in our case:
<button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1" ap-tab-nav-idx="1.2" ap-tab-nav-child="true">
<i class="glyphicon glyphicon-chevron-left"></i>
</button>
And, if I mimic the "by.buttonText" client side script logic in the console, I would get this element passing all the conditions which determine whether to pick an element or not:
> var element = $("button[ng-click='move(-1)']")[0]
> elementText = element.textContent || element.innerText || '';
> elementText.trim() === ""
true

Passing parameter to javascript onclick without using HTML

I can't figure this out. I'm trying to create an onclick handler purely in Javascript.
What I plan to do here is inside this DIV, have a collection of items that I can click on. For now, these items will be numbers from 0 to 9 inclusive. When a number is clicked on, a system message consisting solely of that number should pop-up on the screen. I narrowed my problem down to just the onclick handler definition.
If I use this format:
item[n].onclick=function(n){
handler(n);
}
The handler will fire only when click a number which is correct, but the message that appears is something about mouse event.
If I use this format:
item[n].onclick=function(){
handler(n);
}
The handler will pass a value of -1 which in turn is printed as a message. I think it means "false".
How do I modify this:
item[n].onclick=function(){
handler(n);
}
so that 'n' being used as the handler parameter is the same as the number I click on the screen?
My code is the following:
<div ID="Itemset"></div>
function handler(n){
alert(n);
}
collections=document.getElementById('Itemset');
for(n=0;n<10;n++){
item[n]=document.createElement('DIV');
item[n].innerHTML=n;
collections.appendChild(item[n]);
item[n].onclick=function(n){
handler(n);
}
}
What I'm effectively trying to do if you want to understand it HTML wise is this:
<div ID="Itemset">
<div onclick="handler(0);">0</div>
<div onclick="handler(1);">1</div>
<div onclick="handler(2);">2</div>
<div onclick="handler(3);">3</div>
<div onclick="handler(4);">4</div>
<div onclick="handler(5);">5</div>
<div onclick="handler(6);">6</div>
<div onclick="handler(7);">7</div>
<div onclick="handler(8);">8</div>
<div onclick="handler(9);">9</div>
</div>
Except that I don't want to write out onclick="handler(n);" a million times.
Any advice? and feel free to point to another resource that has the answer I need if there is one.
UPDATE
I'm looking for something compatible with older browsers as well. I'm going to have to not go for the bind function because according to mozilla docs, it works for IE 9+. I'm looking for something that works for IE 7+ as well as other browsers. I might have to go for event listeners if there is no other alternative.

You have a closure issue here (see JavaScript closure inside loops – simple practical example), a simple solution is to use bind to use the current value of n to be a parameter of the handler function
item[n].onclick=handler.bind(item[n],n);

U can use addEventListener and ID for find clicked element...
document.getElementById("Itemset").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
var value_data = parseInt(e.target.textContent);
if(e.target && value_data > -1) {
alert("Malai test:: "+value_data);
//handler(value_data);
}
});
https://jsfiddle.net/malai/tydfx0az/

I found my answer here: https://bytes.com/topic/javascript/answers/652914-how-pass-parameter-using-dom-onclick-function-event
Instead of:
item[n].onclick=function(n){
handler(n);
}
I have to do:
item[n].onclick=new Function('handler('+n+')');
Funny thing is, the word function needs to be capitalized when making a new instance. It's awkward I have to go this route but it works in IE 7+

One alternative is :
function handler(){
alert(this.id);
}
function myFunction() {
var item=[];
collections=document.getElementById('Itemset');
for(n=0;n<10;n++){
item[n]=document.createElement('DIV');
item[n].innerHTML=n;
item[n].setAttribute("id","itemset"+n);
collections.appendChild(item[n]);
item[n].onclick=handler;
}
}
Insert dynamic ids to the elements and when you click on any element retrieve its id using this.id and do whatever you want to do with that value.
That's all.
Hope this helps.

independently working div in Jquery

I am trying to make an independently working div which has a form inside of it.
I use jquery to calculate the price of a product depending of the user's selections in the form. However the user is able to add multiple items in his 'cart' so the form is duplicated to another div. The problem is that the calculation pattern can't separate these two divs and the calculation will be incorrect. The form is also interactive so it will be generated by the user's input. This is really complex set and renaming every variable by the 'product number' doesn't sound really efficient to me.
I'm kind of stuck here and i don't really know how to solve this problem. I had an idea that what if I put an iframe inside of the div and load my form and its calculation script inside of it, and then use post command to transfer the price of the product to the 'main page' to calculate the total price of all of the products the user wanted.
However it seems that jQuery scripts doesn't work independently inside of these iframes, they still have connection so they broke each other.
i will appreciate any kind of suggestions and help to solve this matter, thank you!
here's the code so far
Heres the body
var productNumber = 1;
<div id="div_structure">
</div>
<button id="newProduct" >Add new product</button><br \>
add new item
<!-- language: lang-javascript -->
$('#newProduct').click(function ()
{
$('<div id="productNo'+productNumber+'">')
.appendTo('#div_structure')
.html('<label onclick="$(\'#div_productNo'+productNumber+'\').slideToggle()">Product '+productNumber +' </label>'+
'<button onclick="$(\'#product'+productNumber+'\').remove()">Remove</button>');
$('<div id="div_product'+productNumber+'" style="display: none;">').appendTo('#product'+productNumber+'');
$('<iframe src="productform.html" seamless frameborder="0" crolling="no" height="600" width="1000">').appendTo('#div_product'+productNumber+'');
productNumber++;
});
it also has a function that allows the user to remove the inserted div.
Here's just few lines from the productform
$(document).ready(function()
{
$('#productCalculation').change(function ()
{
shape = $('input[name=productShape]:checked', '#productCalculation').val();
alert(shape);
});
});
<form id="productCalculation">
<div id="div_productShape" class="product1">
<h1>Select the shape of the product</h1>
<input type="radio" name="productShape" value="r1">R1</input><br \>
<input type="radio" name="productShape" value="r2">R2</input><br \>
<input type="radio" name="productShape" value="r3">R3</input><br \>
</div>
.
.
.
</form>
I translated all of the variables so they may not function correctly since i didn't test the translated version. So the problem is, if i try to make selections in the second generated div it wont even alert() the selected variable

There are two problems with this code: You say somewhere "I translated all of the variables so they may not function correctly since i didn't test the translated version. So the problem is, if i try to make selections in the second generated div it wont even alert() the selected variable". This is because event handlers are attached to elements that are in the DOM at that specific moment. To get it to work for all elements, use event delegation:
$(document).ready(function()
{
$(document).on( 'change', '#productCalculation', function ()
{
shape = $('input[name=productShape]:checked', '#productCalculation').val();
alert(shape);
});
});
Your other question is "My question in a nutshell: Is there a way to restrict jquery to function only in certain div even though i use the same variable names in the second div ". You can use the this variable to access the element the click was invoked on. From this element you can traverse the DOM if needed, for example with .parent().
$('div').on( 'change', function( e ) {
console.log( $(this).val() );
} );