Develop Reference

Why does my function return undefined, especially the .split()parts?

So in essence I get the value of input, then try to divide into into different tags via the comma with this
var noteTags = document.getElementsByClassName("noteTag").value;
Tag = noteTags.split(",");
But in console, the split(",") is undefined
Edit: Sorry I forgot to mention that the noteTag element is input, does this change how the code works in any way?

There are two issues,
getElementsByClassName returns an array-like collection of elements (a NodeList).
And instead of value it should be innerText.
Try like below
var noteTags = document.getElementsByClassName("noteTag")[0].innerText;
Tag = noteTags.split(",");

You are using the split() method on an array. You are also trying to access the value property, whereby you should probably use innerText.

You can use querySelector then you dont need using a key[0] to select the element.
const noteTags = document.querySelector("#noteTag");
console.log(noteTags)
Tag = noteTags.innerHTML.split(",");
console.log(Tag)
<div id="noteTag">en,jp,fr</div>

getElementbyId is not a function

I have a simple piece of JavaScript that changes the color of a button, but I keep getting he error that getting the button is not a function, even though the same function (with the same capitalisation and case) works just a couple of lines above.
if (this.ButtonColor != "") {
var button = document.getElementbyId('modal-close');
button.style.backgroundColor = this.ButtonColor;
}

The function is document.getElementById(), not document.getElementbyId()

It is simply a typo, the function you are looking for is getElementById.
By with a capital B instead of by.
here is a reference to that method.

Instead of using this.ButtonColor did you try
var button = document.getElementById("modal-close");
button.style.backgroundColor = "the color you want rather than using "

Javascript validation doesn't work because of documents.getElementsById()

I'm having trouble with this code,if I add the line I have commented out, the form seems to go to the page I've linked in action without undergoing validation.But if i don't include it, the validation works fine and the alert box displays the message.I don't understand the reason why it doesn't work.
function validateform(){
var flag=0;
var uname=document.forms["f1"]["uname"].value;
var pass=document.forms["f1"]["pass"].value;
var fname=document.forms["f1"]["fname"].value;
var lname=document.forms["f1"]["lname"].value;
var phone=document.forms["f1"]["phone"].value;
var email=document.forms["f1"]["email"].value;
var err="";
if(uname==""||uname==null) {
err+="Username cannot be left blank\n";
//document.getElementsById("uname").style.backgroundColor="red";
flag=1;
}
if(pass==""||pass==null){
err+="Password cannot be left blank\n";
flag=1;
}
if(email==""||email==null){
err+="Email cannot be left blank\n";
flag=1;
}
if(flag==0){
return true;
}else{
alert(err);
return false;
}
}

You've made a typo.
It is document.getElementById('id') and not document.getElementsById
It gets a single element as ids are unique and meant for a single element.
It is also named getElementById due to the fact that there can't be duplicate ids.

An id is a unique identifier. There can be only one element of a given id. Therefore the method to get elements by their id is not plural. getElementById, not getElementsById.

getElementsByName and 2. getElementById.
because multiple HTML elements with same name are allowed
because ID is unique and cannot be assigned to multiple HTML Elements.
thats why: getElementsById and getElementByName are wrong

please try this correct the function name document.getElementById its not elements
document.getElementById("uname").style.bacgroundColor="red";

I think you want getElementById not getElementsById (not the S in elementS). Depending on the browser you are using and what you have turned on getElementsById will fail gracefully and never let you know about it or it will display an error.

Is it possible to pass variables to jquery's css function?

I'd like to set css of a div element dynamically using jQuery css() function instead of using string literals/ string constants for the css() function. Is it possible?
Instead of using the following codes with string literals:
$('#myDiv').css('color', '#00ff00');
I would like to use variables to set css for #myDiv element like
Version 1:
var propertyName = get_propery_name(myVariable1); // function get_propery_name() returns a string like 'background-color'
var value = get_value(myVariable2) ; // function get_value() returns a string like '#00ff00'
$('#myDiv').css(propertyName, value);
Version 2: (just hard coded to see if they work without calling custom functions like version 1 above):
var propertyName = 'background-color';
var value = '#00ff00';
$('#divLeftReportView').css(propertyName, value);
Both variable versions of codes do not work. Please help. Thanks.

Both of your examples will work just fine. I would suggest just a bit cleaner approach (personal syntax preference):
$(document).ready(function () {
$('#myDiv').css(get_propery_name(myVariable1), get_value(myVariable2));
}
Here's a working fiddle.
If you want to take it a step further, you can return a CSS map instead of strings:
$('#divLeftReportView').css(GetCssMap("foo"));
function GetCssMap(mapIdentifier) {
return { "background-color" : "#00ff00" }
}
Here's a working fiddle.

The code you posted here should work. I have done both versions of what you are trying to do several times. If it is not working, there is a good chance that something is wrong somewhere else in your javascript OR that you do not have the correct selector/id for the element(s) which you want to change.
Try adding alert("test"); immediately after $('#divLeftReportView').css(propertyName, value);. If you get the popup saying "test" then the problem is with your selector. If not, then the problem is a bug in your javascript.
Also try adding $('#divLeftReportView').css("background-color", "#00ff00"); in the same place. That will confirm whether or not the selector is working.

Seems to work fine at http://jsfiddle.net/gaby/6wHtW/
Make sure you run your code after the DOM ready event..
$(function(){
var propertyName = 'background-color';
var value = '#00ff00';
$('#divLeftReportView').css(propertyName, value);
});
otherwise your elements might not be present in the DOM..

You can also pass multiple CSS parameters within one variable as an array:
$(function(){
var divStyle = {'background-color': '#00ff00', 'color': '#000000'}
$('#divID').css(divStyle);
});

yes, using jQuery attr method you can change css dynamically
var height=$(".sampleClass1").innerHeight();
$('.sammpleClass2').attr('style', 'min-height:'+height+' !important');

How do I test if an element with a certain ID exists on a page in jQuery?

In jQuery, I have written a piece of code that appears on every page of my website.
var d = $('#someElement').offset().top;
However, not every page on my website has an element with an ID of "someElement". Unfortunately, on these pages that lack such an element, no jQuery code works.
To solve this problem, I want to test if an element on the page indeed has the ID of "someElement" and then only run the code snippet above if there is.
How do I perform this test? Will this test solve the problem? Thank you.

$('#someElement').length will return 1 if the element exists, 0otherwise.

Check the length of the jQuery object.
var element = $('#someElement');
if (element.length) {
var element_top = element.offset().top;
}

try this:
if($('#someElement').length>0){
var d = $('#someElement').offset().top;
}

Use if statemtent: if ($('#someElement').length) { do something }

Just an alternative way of solving it: You can run var d = $('#someElement').offset() without causing an error (it will just return null), even if the element does not exist. So try:
var d = $('#someElement').offset();
if (d) {
d = d.top;
}

Do not use jQuery for that! Use getElementById, since if the element is not in the DOM, the result will be null.
if (document.getElementById("someElement")) {
}