Pull down menue using getElemntById --Help Please

[vanessia_1999]

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?

function CheckForCreditCard()
if document.getElementById("divCreditCardInfo").options3].selected == true)
{ 
CreditCardInfo.style.visibility = "visible";
}

below is in the body

<select name="selPayment" onchange="CheckForCreditCard();">
    <option value="Cash">Cash</option>
    <option value="Check">Check</option>
    <option value="Credit Card" selected="selected">Credit Card</option>
</select>


<div id="CreditCardInfo"> <br />
    Card Number:
  <input name="selCreditCardInfo" size="20" type="text" />
    &nbsp;&nbsp;  	Month:
  <input type="text" name="txtMonth" size="4" />
    &nbsp;&nbsp;Year:
  <input name="txtYear" size="4" type="text" />
</div>

[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");

[vanessia_1999]

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";

so why is it not doing what it is suppose too. the function is in the head between javascript

[Luckychap]

Then the if-condition should be:

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.

[vanessia_1999]

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.

[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" />
&nbsp;&nbsp; Month:
<input type="text" name="txtMonth" size="4" />
&nbsp;&nbsp;Year:
<input name="txtYear" size="4" type="text" />
</div>

Check this out.

[vanessia_1999]

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" />
&nbsp;&nbsp; Month:
<input type="text" name="txtMonth" size="4" />
&nbsp;&nbsp;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.

[Luckychap]

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.

[vanessia_1999]

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!