Here is JS function. this function is an event handler for a checkbox. so the element is the checkbox.
function updateSelect(element) {
// this works
document.getElementById("file_update_" + 1).disabled = !element.checked;
// this does not works. the element.value is also 1
document.getElementById("file_update_" + element.value).disabled = !element.checked;
}
the console has the following error.
Uncaught TypeError: Cannot set property 'disabled' of null
at updateSelect (<anonymous>:21:75)
at HTMLInputElement.onchange (updateuser:1)
any idea....what is unique about the element.value?
After doing some trial and error this worked
function updateSelect(element) {
var v = parseInt(element.value, 10);
document.getElementById("file_update_" + v).disabled = !element.checked;
}
I do not know why I had to do this to make it work.
I would appreciate it if someone helps me to understand it.
Related
So I'm basically trying to get a property from my $rootScope when the page loads. I need this property so I can display the value in my form.
After testing this:
console.log("DEBUG $rootScope", $rootScope);
console.log("DEBUG $rootScope.localClient", $rootScope.localClient);
I've noticed that $rootScope contains a localClient property, but $rootScope.localClient is undefined. Why is this?
See console screen below.
Here is where I fill the localClient object
function setClient(client, tvaNumber) {
if (tvaNumber) {
if (angular.isUndefined($rootScope.localClient))
$rootScope.localClient = {};
$rootScope.localClient[tvaNumber] = client;
}
}
Try accessing it like this,
console.log("DEBUG $rootScope.localClient", $rootScope['localClient']);
You must make sure the attribute loaded before use it, because JavaScripte always pass a reference to an object. Or you can try console.log(JSON.parse(JSON.stringify($rootScope)) get the real value.
One example:
var a = {}; console.log(a);a.test = '1';
I declared an Observable:
isOn: Observable<boolean>;
in onInit I did:
this.isOn = this.manager.currentState.map(state => state === StateType.typeOn);
and now I wanted to be able to update some input in the html file so to be able to sample it I understood I need to subscribe to it so I declared _currentState: Subscription; and added in the onInit:
this._currentState = this.isOn.subscribe(
(retValue: Boolean) => {
if (retValue) {
this.curState = true;
} else {this.curState = false;}
}
);
the problem occurs in the else right here above...its not setting the value to false.
and curState is what im questioning in my input to see it's value...but at certain action I did I didnt get the value I expected...
what am im doing wrong? im new to Observables so as much inputs I can get from you guys will help :) thanks
I'm trying to test a function that dynamically determines how many empty rows and columns should be added to a grid. In order to do that I need to set the width of the $document.body. I've so far been able to successfully append and style divs on the body, but not style the body itself. Here's that code:
// Set up the DOM
body = angular.element($document[0].body);
mainColumn = angular.element('<div></div>')[0];
reportGrid = angular.element('<div></div>')[0];
body.append(mainColumn);
body.append(classReportGrid);
// Style elements
mainColumn.style.height = '413px';
mainColumn.style.width = '600px';
reportGrid.style.height = '1000px';
reportGrid.style.width = '1040px';
Here are some approaches I've tried with their corresponding errors bellow:
body.style.width = '800px';
// TypeError: 'undefined' is not an object (evaluating 'body.style.width = '800px'')
body.setAttribute('style', 'width: 800px');
// TypeError: 'undefined' is not a function (evaluating 'body.setAttribute('style', 'width: 800px')')
If I log the body.style, it's undefined. Any advice is appreciated!
I trying to run standart example from Protractor's documentation ( http://angular.github.io/protractor/#/api?view=ProtractorBy.prototype.addLocator ). And have an Error: 'Cannot read property 'querySelectorAll of null'
by.addLocator('buttonTextSimple',
function(buttonText, opt_parentElement, opt_rootSelector ) {
var using = opt_parentElement,
buttons = using.querySelectorAll('button');
return Array.prototype.filter.call(buttons, function(button) {
return button.textContent === buttonText;
});
});
View the same:
<button ng-click="doAddition()">Go!</button>
What I should do to solve this problem?
You should declare a variable called using like this:
var using = opt_parentElement || document;
so if there is no optional parent element provided, then global document will be used to query for results.
Not sure if it is a typo in the documentation or Protractor was expected to auto-fill opt_parentElement variable with some defaults if it is not being set.
I don't really understand why the following code isn't working. I want iron-media-query to call a function when the query changes. I got it working using query-matches and template if's but that isn't what I want at all. Here is the code I have:
<iron-media-query
query="(max-width:1024px)"
query-matches="{{condensedscreen}}"
query-changed="switchToCondensed">
</iron-media-query>
I want the query-change="switchToCondensed" to be called once this query requirement is met.
The switchedToCondensed function is the following:
switchToCondensed: function(e) {
console.log("Condensed: "+this.condensedscreen);
if(this.condensedscreen === true) {
this.sectionbox = "section-boxes-condensed";
this.setScreenSize = "checkoutBodyMobile";
//this.sectionStyle = "sectionMobile";
this.shippingSectionStyle = "shippingSectionMobile";
this.allCardsStyle = "allCardsMobile";
this.submitBtnStyle = "submitBtnMobile";
this.gotocartStyle = "goToCartMobile";
}
else {
this.sectionbox = "section-boxes";
this.setScreenSize = "checkoutBody";
//this.sectionStyle = "section";
this.shippingSectionStyle = "shippingSection";
this.allCardsStyle = "allCards";
this.submitBtnStyle = "submitBtn";
this.gotocartStyle = "goToCart";
}
}
As you can see I want to use this to change around the CSS on my webpage. What exactly am I doing wrong here?
Did you try to use "on-query-matches-changed" instead of "query-changed"?
<iron-media-query
query="(max-width:1024px)"
query-matches="{{condensedscreen}}"
on-query-matches-changed="switchToCondensed">
</iron-media-query>
So I never got query-changed to work. Honestly that seems completely useless. Anyway, I got it to work by first adding the $ to my class like the following:
<div class$="[[allCardsStyle]]">
After that I removed the query-changed from iron-media-query so it looked like the following:
<iron-media-query
query="(max-width:1024px)"
query-matches="{{condensedscreen}}">
</iron-media-query>
Then back in the JS I added an observer to watch when the boolean variable changes:
condensedscreen:{observer:"switchToCondensed"}
Finally, with that watching the change I had it call my function "switchToCondensed" that actually set the variable to mobile vs not:
switchToCondensed: function() {
if(this.condensedscreen === true) {
this.allCardsStyle = "allCardsMobile";
}
else {
this.allCardsStyle = "allCards";
}
}
Then in my CSS I have two different styles that are call allCards and allCardsMobile.
Hopefully this helps someone that was struggling with this like me.