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 "
Related
I have a problem, when I run my function "addMoney(amount)" (shown below) it works and shows the following: 100[object HTMLButtonElement]
My question is this, is there a way to get rid of the [object HTMLButtonElement] while keeping the number from moneyAmount when the function is called? And additionally, is there a way to call the function multiple times and add the money accordingly? As it only works the first time I call it, calling it more than once with the same or different amounts of moneyAmount displays no more or no less than what displays the first time.
My HTML:
<li class="item_shown" id="money">Shrill: <button class="moneyButton" id="moneyAmount">0</button></li>
Calling the function in HTML:
<a class="button" onclick="javascript:addMoney('100');">Add 100 Money</a>
My JS Function:
function addMoney(amount) {
document.getElementById('moneyAmount')
var newBalance = amount + moneyAmount;
document.getElementById('moneyAmount').innerHTML = newBalance;
}
The text inside an element is considered to be a text node and since the button node has no other children, is the button node's first child. The text node's value (in this case "0") is the value of its nodeValue property. Assigning a new value to the nodeValue will change the text displayed. So in your case the following code should work:
function addMoney(amount) {
var node = document.getElementById('moneyAmount');
var textNode = node.childNodes[0];
var moneyAmount = parseInt(textNode.nodeValue, 10);
textNode.nodeValue = amount + moneyAmount;}
In your JavaScript, + moneyAmount; does not do anything. It returns what you see: [object HTMLButtonElement].
I think you want to add some numbers but it's not yet completely clear to me what you're trying to achieve. Could you elaborate?
Chris
EDIT:
Thank you for clarifying your question.
Try updating your function like this:
function addMoney(amount) {
var oldBalance = document.getElementById('moneyAmount').value;
var newBalance = amount + oldBalance;
document.getElementById('moneyAmount').innerHTML = newBalance;
}
Try to find value by document.getElementById('moneyAmount').innerHTML and use some global variable say total_value to store retrieved value and then for each function call try to add the retrieved value to the previously stored value.
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.
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');
If I have a much simplified JavaScript method such as this:
function myfunction() {
var i = 9;
}
Is there any way I can get the value of i into HTML such that when the web page with this method is called, the value 9 is displayed in a div or span element?
You can write document.getElementById("some ID").innerHTML = i
Hi :D you can try the following using JQuery:
var i = 9;
$('#spanId').text(i);
or the classic old-fashion way:
var tmp= document.getElementById('spanId');
tmp.textContent = id;
I hope this helps.
You can use innerHTML to embed the i value in a div or span element.
myfunction() current does not return its value. However, if you want to get the value when the page is "called" (loaded) you can do this:
function myfunction() {
var i = 9;
return i;
}
And in the markup:
<body onload="document.getElementById('id_of_your_div').innerHTML = myfunction()">
Please note that innerHTML has cross-browser issues, so you may want to use a library function such as jQuery's html() for reliable results.
Yes, you can assign an id to your <div> or <span> and set its innerText/textContent property to your value.
window.onload = function() {
var content = myfunction();
var tag = document.getElementById('displayVar');
if(typeof tag.innerText == "undefined") {
tag.textContent = content;
} else {
tag.innerText = content;
}
}
Do not use innerHTML if you do not want the HTML code of your value to be parsed (or if you don't expect any HTML value).
And no, you do not need a 31kb library to do that kind of work (just in case there's a bunch of "jQuery can do that!" answers).
Note that you must also modify myfunction() so that it returns the current value. A simple return i; statement in the function will do the trick.
JavaScript:
function myFunction() {
var i = 9;
return i;
}
$('myElement').innerHTML = myFunction();
HTML:
<span id="myElement"></span>
you can also use jQuery to simplify the syntax following are the three ways you can do that using jQuery,
1) $('span').text(i)
2) $('#someid').text(i) //someid = value of id attribute of span tag.
3) $('.someclassname').text(i) //someclassname = class name for the span tag.
Also using jQuery means forcing the users have to download addition jQuery lib when the page loads. That might slow down the page depending on the connection speed of the users. You might want to consider that while selecting between jQuery and plain JavaScript
I call the following function with a mouseover event but it's not working. My id's are all correct & I have properly linked all my external scripts.
function new2() {
var prevWin = document.GetElementById("recentlyaddedtip");
prevWin.style.visibility = "visible";
}
recentlyaddedtip is set as hidden in the stylesheet (and it properly changes to visible when I change it manually.)
JavaScript is case sensitive.
Try:
document.getElementById('recentlyaddedtip');
Notice the small 'g'.
You shouldn't uppercase the G in GetElementById, it should be getElementById().
JavaScript is case sensitive ;-)
var prevWin = document.getElementById("recentlyaddedtip");
getElementById is a case sensitive function name.
GetElementById should be getElementById (note the case)
Well, I don't see your mouseover function so I don't know if that's spelled right, but try:
var prevWin = document.getElementById("recentlyaddedtip");
with a lowercase g.