function() {
var id1 = document.getElementById("usrEmailId").value
var id2 = document.getElementById("usrEmailIdSecondary").value
var id3 = document.getElementById("emailId").value
}
Here, on a HTML page, I have Email Id capture field. There are two pages and one page has only the element usrEmailId and usrEmailIdSecondary and the other page has the elements usrEmailId and emailI. So what will happen to variable id3 in case of first page. What will be stored in it? (NULL, undefined, or empty)?
If the element doesn't exist and getElementById returns null, nothing will get stored at all because trying to access the .value property on null will throw an exception before.
What will be stored in it?
Short answer: Nothing.
It will throw error as something like "can't get value of null" and code execution stops at this place.
var id1 = document.getElementById("usrEmailId").value; // <---if doesn't exist
console.log('Log it if id1 is null.'); // <---it won't happen
An error gets generated on the javascript console. Check this code snippet
function foo() {
var id1 = document.getElementById("Email1").value
console.log(id1);
}
<body>
<input type="text" id="Email">
<input type="text" id="pwd">
<button onClick=foo()>Try</button>
</body>
Try running the code, you'll find Cannot read property 'value' of null appearing on the console whenever a getElementById("Email1").value is called as id Email1 is not present in the page.
Open developer tools/Inspect > Console if console output doesn't appear on screen.
Related
We are defining variables from the elements on one page of the website, clicking on the edit button, which is opening the next page. In this page we need to assert that the data captured on the earlier page matches the data shown on the 2nd page. Our problem is, once the test moves to the 2nd page, it fails to recall the variables that we defined on the 1st page. below is our code snippets:
it ('Student ID Validation', function(){
// get rows
var rows = tableData_Dashboard.all(by.tagName("tr"));
// get cell values
var cells = rows.all(by.tagName("td"));
var Student_ID = cells.get(0).getText().then(function(SID){
console.log(SID);
});
Edit_Button_1.click();
browser.sleep(2000);
expect(Student_ID_on_Reg_Page.getAttribute('value')).toEqual(Student_ID);
after execution, we get the following error
Message:
Expected '123456' to equal undefined.
We were suspecting that it may be due to asynchronization, but that is not the case. the test moves to page 2 after it stores the variable from page 1, so we are at a loss why this is happening. How can we fix this and use the variables for assertion purpose?
The problem is that you've specified the then() callback where you just log the value but don't return it:
var Student_ID = cells.get(0).getText().then(function(SID){
console.log(SID);
});
As nothing is returned, Student_ID would become a promise which would resolve into undefined.
You either need a return:
var Student_ID = cells.get(0).getText().then(function(SID){
console.log(SID);
return SID;
});
Or, remove the custom callback completely:
var Student_ID = cells.get(0).getText();
actually, the following part is causing the problem. Once we removed this part, the test is working fine.
.then(function(SID){
console.log(SID);
});
I'm trying to return the first h1 element inside an iframe I've loaded onto my page.
var res = await (await fetch(`https://www.google.com/search?q=${text}`)).text(); //Text is a variable assigned previously
var currentFrame = document.getElementById('frame0');
var currentDocument = currentFrame.contentWindow.document;
currentDocument.write(res);
var elem = currentDocument.querySelector("h1");
console.log(elem);
I'm being able to get the iframe content to show up properly but when I try to print "elem" value whenever the h1 tag of said page has a class it shows up as null.
As in:
<h1>Test</h1> //is found properly and console.log prints "Test" which is what I want
But on the other hand...
<h1 class="classyBoy">Test</h1> //isn't found properly and return null
I've tried changing querySelector("h1") to querySelector("h1 *") and querySelector("* h1") but had no success doing so.
As soon as I started waiting until currentDocument.body != null the queries started working.
I'm new to angularjs and am trying to use the angucomplete-alt to allow the user to search for worker names. The search works great, but when I try to clear the input box after the user selects a result the box clears but I get this error message...
TypeError: Unable to get property 'originalObject' of undefined or null reference
at $scope.nameSelected (..Worker.php:498:3)
at callOrAssign (..angucomplete-alt.js:167:11)
at Anonymous function (..angucomplete-alt.js:124:11)
at Scope.prototype.$broadcast (..angular.js:18487:15)
at $scope.deleteRow (..Worker.php:471:6)
at fn (Function code:2:153)
at callback (..angular.js:26994:17)
at Scope.prototype.$eval (..angular.js:18161:9)
at Scope.prototype.$apply (..angular.js:18261:13)
at Anonymous function (..angular.js:26999:17)
Everything seems to work fine, but I hate getting a huge error every time.
this is the box
<angucomplete-alt id="workerName"
placeholder="Name"
pause="100"
minlength="2"
selected-object="nameSelected"
remote-url="Suggest_Name.php?term="
remote-url-data-field=""
title-field="value"
input-class="form-control">
</angucomplete-alt>
and this is the clear command
//clear the autocomplete text box
$scope.$broadcast('angucomplete-alt:clearInput','workerName');
thanks to a user's question I think I've figured it out. It looks like the nameSelected function fires when the autocomplete is cleared. Here's nameSelected..
//autocomplete callback function
$scope.nameSelected = function ($item){
if($item != undefined){ //I just added this
//console.log($item.originalObject);
$scope.worker_new.Emp_Name = $item.originalObject.lastname + ', ' + $item.originalObject.firstname;
$scope.worker_new.PDCWorker_EID = $item.originalObject.UWIdNbr;
$scope.worker_new.PCA_Option = $item.originalObject.pca_option;
}
}
adding the check to see if '$item' is undefined has solved my error problem.
I am working on an admin page where I need to look up the object properties of a user whose user profile page I am on. I am trying to query the user's object and attributes but I keep getting 'undefined' in the console. I want to click a button and have the console spit out the object & its properties. It's worth noting that I am able to print out the user's _id field, but nothing else.
Here's my click event:
'click .confirmUser': function(e, tmpl) {
e.preventDefault();
var currentUserId = this._id;
var currUser = Meteor.users.find(currentUserId)
console.log('current user id is ' + currentUserId);
console.log(currUser.profile);
console.log(currUser.id);
console.log(currUser._id);
The output I get is:
current user id is JY2hydg9NWwHwpoNS
undefined
undefined
undefined
Does anyone know what's going on? I used the exact same type of coding in my adminController to check the admin's isAdmin flag, which worked, so I'm not sure why this isn't working... Thank you in advance!
Try changing that query to
Meteor.users.findOne(currentUserId)
You get undefined because you are using .find() wich retruns the collections instance and not the objects use fetch() instead.
And do the console.log like this
console.log(currUser[0].username)
to check this if you print the Meteor.users.find(currentUserId), you will get something like Local.Collection({object:null},etc)
I've got some form verification code that doesn't seem to be working correctly, and I can't figure out why.
function isTextFieldEmpty(textField){
//return true or false depending on whether or not there is any text in the field
console.log("Checking to see if the current field is empty...");
var val = textField.value; //val is the text from the current field
console.log("The current value of 'val' is: " + val);
if(val.length < 1){
return true;
}else{
return false;
}
}
The error I get is: "Uncaught TypeError: Cannot read property 'length' of undefined". Sure enough, my console log says that the value of 'val' is undefined.
I'm sure I'm missing something, but I'm still learning JS and can't figure out what it is. Any suggestions?
Edit: Here is what I'm passing to the function:
var uName = document.getElementById("unionname");
var noUnionName = isTextFieldEmpty(uName);
'unionname' is the id of the texfield that I'm trying to validate. Here is the relevant HTML:
<div class="formBox">
<label for="unionname">Union Name</label>
<input type="text" name="unionname" id="unionname" value="" class="wide"/>
<span class="feedback good">Sample good message</span>
</div>
You are declaring var val locally in that function. Try declaring it globally by putting it at the top of your script; don't need to set it, just declare it.
I've gotten it working. Seems that the validation function was fine; the problem was in the way I was calling it.
window.onload = justDoIt;
function justDoIt() {
var uName = document.getElementById("unionname");
uName.onblur = function(){
clearMessages(uName); // clear out old feedback for this field
var noUnionName = isTextFieldEmpty(uName);
This is how I ended up calling the function.
Ironically, it seems that the faulty .onblur code that I left out of my previous example may have been the cause of my problem. But I'm really not sure.