Append Text with conditional statement in Javascript

Question

I'm new to Javascript. I'm creating a cell phone animation to illustrate probability. I have a graphic of an iPhone and buttons for all the keys. When a button is pressed the corresponding number shows on the phone screen (box I drew and ID as "phone"). However, there are some stipulations: for example, the 3-digit area code and 3-digit prefix cannot start with 1 (etc.). So I have conditions that must be met before the text can be appended. Here is my code for entering the number 1 when its button is pressed:

var phone = document.getElementById("phone");

if(phone.value.length == 0) {
phone.innerHTML = phone.innerHTML + "";
}

else if(phone.value.length == 6) {
phone.innerHTML = phone.innerHTML + "";
} 

else if(phone.value.length == 3) {
phone.innerHTML = phone.innerHTML + "1)";
} 

else if(phone.value.length == 8) {
phone.innerHTML = phone.innerHTML + "1-";
} 

else if(phone.value.length == 2) {
phone.innerHTML = phone.innerHTML + "";
} 
else {
phone.innerHTML = phone.innerHTML + "1";
}

Unfortunately, this code doesn't work. If I comment out all the code except something like

var phone = document.getElementById("phone");
phone.innerHTML = phone.innerHTML + "1)";

then it works. So I am assuming I don't have the correct syntax for the conditionals. Thanks!

If phone is an <input> element and has a value then using its innerHTML doesn't make much sense — Bergi
– Bergi, Commented Jul 1, 2013 at 13:16
what kind of element is phone? it it's an input just change all .innerHTML with .value. — Fabrizio Calderan
– Fabrizio Calderan, Commented Jul 1, 2013 at 13:16
Not explicitly related, but I'd suggest using a switch statement. Would make it easier to read. — Luke Smith
– Luke Smith, Commented Jul 1, 2013 at 13:18
using both value and innerHTML on a single node doesn't add up. Nor does a huge series of if-else(if) conditions. Look into switch (which "falls through" in JS), don't add '', just break in those cases, and set up a fiddle — Elias Van Ootegem
– Elias Van Ootegem, Commented Jul 1, 2013 at 13:18

Kilian Stinson · Accepted Answer · 2013-07-01 13:45:23Z

1

Due to your working example with innerHTML, phone is probably not an input element. So you have to use innerHTML instead of value in order to get the string and compare its length.

Replace

if (phone.value.length == 0)
....

with

if (phone.innerHTML.length == 0)
....

in your conditional statements.

edited Jul 1, 2013 at 13:45

answered Jul 1, 2013 at 13:21

Kilian Stinson

2,40430 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rick Hoving · Accepted Answer · 2013-07-01 13:18:23Z

0

Does this work?

var phone = document.getElementById("phone");
var addition = "";    

switch(phone.value.length){
   case: 0
   case: 6
       addition = "";
       break;
   case: 3
       addition = "1";
       break;
     .......//put rest of your cases here and dont forget default: break;
}


phone.innerHtml += addition;

The changes I have made:

In a case where you have this much else if statements, it is better to use the switch statement
I added a new variable addition which holds the string that has to be appended to the innerhtml of the phone, therefore you only have to change the innerHtml only once.

answered Jul 1, 2013 at 13:18

Rick Hoving

3,5853 gold badges31 silver badges50 bronze badges

Collectives™ on Stack Overflow

Append Text with conditional statement in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related