2013-07-01 2 views
2

Я новичок в Javascript. Я создаю анимацию сотового телефона, чтобы проиллюстрировать вероятность. У меня есть рисунок iPhone и кнопки для всех клавиш. При нажатии кнопки соответствующий номер отображается на экране телефона (поле, которое я рисовал, и идентификатор как «телефон»). Однако есть некоторые положения: например, трехзначный код области и трехзначный префикс не могут начинаться с 1 (и т. Д.). Поэтому у меня есть условия, которые должны быть выполнены до того, как текст будет добавлен. Вот мой код для ввода номера 1 при нажатии на его кнопку:Добавить текст с условным выражением в Javascript

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

К сожалению, этот код не работает. Если я прокомментирую весь код, за исключением чего-то вроде

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

затем он работает. Поэтому я предполагаю, что у меня нет правильного синтаксиса для условных выражений. Благодаря!

+1

Вау, это много переплавов. – jeremy

+2

Если 'phone' является элементом' 'и имеет' значение', то использование его 'innerHTML' не имеет особого смысла – Bergi

+0

какой элемент является« телефоном »? это его вход, просто измените все .innerHTML с .value. – fcalderan

ответ

0

Это работает?

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; 

Изменения, которые я сделал:

  • В случае, если у вас есть это много еще, если заявления, то лучше использовать переключатель Заявление о
  • Я добавил новую переменную addition которая содержит строка, которая должна быть добавлена ​​к innerhtml телефона, поэтому вам нужно только изменить innerHtml только один раз.
1

Благодаря вашему рабочему примеру с innerHTML, phone, вероятно, не input элемента. Поэтому вы должны использовать innerHTML вместо value, чтобы получить строку и сравнить ее длину.

Заменить

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

с

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

в ваших условных операторах.

Смежные вопросы