•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 375,214 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,278 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 842 | Replies: 8 | Solved
 |
•
•
Join Date: Apr 2008
Posts: 17
Reputation: 
Rep Power: 1
Solved Threads: 0
Newbie Poster
Hi everyone, I am so new to javascript and it is really giving me a micrain. It looks easy but tend to be hard. Atleast for me since I am a beginner.
I need help please. I need to make work with the element getElementById
I have tried numerous way for days and nothing is working. All I am trying to do is when onchange the user go on the option credit card, the credit card information box shows. This is what I have in the script tag. Can some please tell me what am I doing wrong and what should I have done?
below is in the body
I need help please. I need to make work with the element getElementById
I have tried numerous way for days and nothing is working. All I am trying to do is when onchange the user go on the option credit card, the credit card information box shows. This is what I have in the script tag. Can some please tell me what am I doing wrong and what should I have done?
JavaScript Syntax (Toggle Plain Text)
below is in the body
html Syntax (Toggle Plain Text)
Last edited by peter_budo : May 16th, 2008 at 6:50 am. Reason: The code tags encapsulate your code, not to be replace by your code ;)
•
•
Join Date: Aug 2006
Location: Noida, India
Posts: 152
Reputation:
Rep Power: 2
Solved Threads: 16
Junior Poster
The function should be like this :
You should first get a refrence for any document element before setting any properties. I.E done by:
function CheckForCreditCard()
if document.getElementById("divCreditCardInfo").options3.selected == true)
{
var CreditCardInfo = document.getElementById("CreditCardInfo");
CreditCardInfo.style.visibility = "visible";
}You should first get a refrence for any document element before setting any properties. I.E done by:
var CreditCardInfo = document.getElementById("CreditCardInfo"); •
•
Join Date: Apr 2008
Posts: 17
Reputation:
Rep Power: 1
Solved Threads: 0
Newbie Poster
•
•
•
•
Originally Posted by Luckychap 
The function should be like this :
function CheckForCreditCard() if document.getElementById("divCreditCardInfo").options3.selected == true) { var CreditCardInfo = document.getElementById("CreditCardInfo"); CreditCardInfo.style.visibility = "visible"; }
You should first get a refrence for any document element before setting any properties. I.E done by:
var CreditCardInfo = document.getElementById("CreditCardInfo");
Okay I understand why you added the variable line CreditCardInfo. You have it so the variable I have in the heading of my javascript is called onto and identify with the function of the credit card info to show if it is set to visible.
I notice that you did not put the 3 in [] after options, but I did; because dealing with selections or check numbers they star with a [0] and should be in boxes for them to work.
One thing I don't understand is that everything look good but why is it still not working. Why is it when I go on credit card that the credit card information is not displaying.
I told it
CreditCArdInfo.style.visibility = "visible";
•
•
Join Date: Aug 2006
Location: Noida, India
Posts: 152
Reputation:
Rep Power: 2
Solved Threads: 16
Junior Poster
Then the if-condition should be:
because you have only three options: option[0], option[1] and option[2]. There is no option[3] option.
if (document.getElementById("divCreditCardInfo").options[2].selected == true)because you have only three options: option[0], option[1] and option[2]. There is no option[3] option.
Last edited by Luckychap : May 16th, 2008 at 3:25 am.
•
•
Join Date: Apr 2008
Posts: 17
Reputation:
Rep Power: 1
Solved Threads: 0
Newbie Poster
I am like so dumb. I know that, but over look it. I javascript really frustate me. When everything look good it still does not work.
I do thank you for responding.
I do thank you for responding.
•
•
Join Date: Aug 2006
Location: Noida, India
Posts: 152
Reputation:
Rep Power: 2
Solved Threads: 16
Junior Poster
if its taking too much time, here is your whole code:
Javascript function:
here is the HTML code
Check this out.
Javascript function:
function CheckForCreditCard(el) {
if (el.options[2].selected == true)
{
var CreditCardInfo = document.getElementById("cci_div");
CreditCardInfo.style.visibility = "visible";
}
}here is the HTML code
<select name="selPayment" onchange="CheckForCreditCard(this);"> <option value="Cash">Cash</option> <option value="Check">Check</option> <option value="Credit Card" selected="selected">Credit Card</option> </select> <div id="cci_div"> <br /> Card Number: <input name="selCreditCardInfo" size="20" type="text" /> Month: <input type="text" name="txtMonth" size="4" /> Year: <input name="txtYear" size="4" type="text" /> </div>
Check this out.
Last edited by Luckychap : May 16th, 2008 at 4:22 am.
•
•
Join Date: Apr 2008
Posts: 17
Reputation:
Rep Power: 1
Solved Threads: 0
Newbie Poster
•
•
•
•
Originally Posted by Luckychap
if its taking too much time, here is your whole code:
Javascript function:
function CheckForCreditCard(el) { if (el.options[2].selected == true) { var CreditCardInfo = document.getElementById("cci_div"); CreditCardInfo.style.visibility = "visible"; } }
here is the HTML code
<select name="selPayment" onchange="CheckForCreditCard(this);"> <option value="Cash">Cash</option> <option value="Check">Check</option> <option value="Credit Card" selected="selected">Credit Card</option> </select> <div id="cci_div"> <br /> Card Number: <input name="selCreditCardInfo" size="20" type="text" /> Month: <input type="text" name="txtMonth" size="4" /> Year: <input name="txtYear" size="4" type="text" /> </div>
Check this out.
Oh, my goodness it is working. I thank you so much. I really appreciate it. This assignment is a five part assignment and normally I struggle with it until I get it. This part that you help me out with is the third part of the assignment. I have been working on this for four days. One day I did not sleep for 48 hours. I have 18 credit hours this semester and I notice that I concentrate more on javascript because it is my most dificult. I am taking beginner javascript on line.
The class is conducted as read the chapter then do the assignment. But once we do the assignment which is from the teacher not from the book. The assignment is advance, then the book. I really thank you very much. the getElementById is very new to me and a big struggle.
May I ask you a few questions. I would like to understand the codes a little. So when I encounter the getElementById again I will know what to do.
1. in the function you have the word el may you please tell me what does el mean and where did it came from?
2. I notice that you change the div name to ("cci_div"). May I ask why? Is there a reason not to use ("divCreditCardInfo").
3. I also notice that ou use (this) inside the onchange tag "CheckForCreditCard" is it a variable and if so to what, and why did you use this instead of leaving it blank?
I really do Thank You. for helping out of my insanity. However, I would like to learn about the changes to grab an understanding.
•
•
Join Date: Aug 2006
Location: Noida, India
Posts: 152
Reputation:
Rep Power: 2
Solved Threads: 16
Junior Poster
Ok here are the answers for your questions:
Q1. In the function you have the word el may you please tell me what does el mean and where did it came from?
Q2. I also notice that ou use (this) inside the onchange tag "CheckForCreditCard" is it a variable and if so to what, and why did you use this instead of leaving it blank?
A1/A2. el is a element refrence, it has been passed from the onchanged event function. That refrence element is this . in javascript this correspond to the current element from where it is passed. In yous case this is <select> element. this is a keyword in javascript. please read more documentation on this.
Q3. I notice that you change the div name to ("cci_div"). May I ask why? Is there a reason not to use ("divCreditCardInfo").
A3. No there is no specific reason to change it to "cci_div". We usually make id names small. You can ofcourse use ("divCreditCardInfo"), but in the function also u have to change "cci_div" to "divCreditCardInfo".
Please mark this thread as solved.
Q1. In the function you have the word el may you please tell me what does el mean and where did it came from?
Q2. I also notice that ou use (this) inside the onchange tag "CheckForCreditCard" is it a variable and if so to what, and why did you use this instead of leaving it blank?
A1/A2. el is a element refrence, it has been passed from the onchanged event function. That refrence element is this . in javascript this correspond to the current element from where it is passed. In yous case this is <select> element. this is a keyword in javascript. please read more documentation on this.
Q3. I notice that you change the div name to ("cci_div"). May I ask why? Is there a reason not to use ("divCreditCardInfo").
A3. No there is no specific reason to change it to "cci_div". We usually make id names small. You can ofcourse use ("divCreditCardInfo"), but in the function also u have to change "cci_div" to "divCreditCardInfo".
Please mark this thread as solved.
Last edited by Luckychap : May 16th, 2008 at 7:20 am.
•
•
Join Date: Apr 2008
Posts: 17
Reputation:
Rep Power: 1
Solved Threads: 0
Newbie Poster
•
•
•
•
Originally Posted by Luckychap
The function should be like this :
function CheckForCreditCard() if document.getElementById("divCreditCardInfo").options3.selected == true) { var CreditCardInfo = document.getElementById("CreditCardInfo"); CreditCardInfo.style.visibility = "visible"; }
You should first get a refrence for any document element before setting any properties. I.E done by:
var CreditCardInfo = document.getElementById("CreditCardInfo");
Thank you very much Luckychap. You have really gave me a greater understanding of dealing with getElementById. My book, "The book of Javascript 2nd Edition", only touch on it and did not explain it in detail to understanding as you did. I will take this to the grave with me. I Thank you very much for your time and your patience. Have a wonderful weekend!
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Validating radio button selection for login redirect
- Next Thread: A new simply way to make a image slider- Javascript Code
