Javascript раскрывающееся меню расчета

У меня есть небольшая проблема со мной код. Я пытаюсь сделать расчет из выпадающего меню, а затем он переключится в текстовое поле. Я занимался этим уже несколько дней, пытаясь разобраться в этом, и гуглить способы кодирования функции. Может кто-нибудь помочь или дать мне совет, как подойти к этому?

function numGuest()
{
    var a = document.getElementById("guests");
    if(a.options[a.selectedIndex].value == "0")
    {
        registration.banq.value = "0";
    }
    else if(a.options[a.selectedIndex].value == "1")
    {
        registration.banq.value = "30";
    }
}

<select id="guests" name="guests">
<option value="0">0</option>
<option value="1">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<input type="text" id="banq" name="banq" onChange="numGuest()" disabled />
Источник

3 ответа

Решение

Регистрация не определена. Вам нужно получить ваш элемент ввода текста так же, как вы сделали элемент guest. Кроме того, слушатель onChange должен быть присоединен к меню выбора, а не к текстовой области.

<html>
<script>
function numGuest()
{
    var banq = document.getElementById('banq');
    var a = document.getElementById("guests");

    if(a.options[a.selectedIndex].value == "0")
    {
        banq.value = "0";
    }
    else if(a.options[a.selectedIndex].value == "1")
    {
        banq.value = "1";
    }
}
</script>
<select id="guests" name="guests"  onChange="numGuest()" >
    <option value="0">0</option>
    <option value="1">1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

    <input type="text" id="banq" name="banq" disabled />
</html>
Источник

Почему id=banq (текстовое поле) отключен?

Для включения: document.getElementById('banq'). Disabled = false;

Для значения выберите:

function numGuest(){
    var theGuestValForCalc = 0;
    var theFinalResult = 0;   

    theGuestValForCalc = document.getElementById('guests').options[document.getElementById('guests').selectedIndex].value;



    theFinalResult = theGuestValForCalc * 10 // or some value, calculation, etc.

    document.getElementById('banq').innerHTML = theFinalResult;

    // return theFinalResult;

}

Источник

В вашем коде:

> <input type="text" id="banq" name="banq" onChange="numGuest()" disabled />

Вероятно, это должно быть поле для чтения, а не отключено.

Слушатель onchange должен находиться на элементе select. Также для удобства вы можете передать ссылку на элемент в слушателе:

<select name="guests" onchange="numGuest(this)">

Затем в функции numGuest:

function numGuest(element) {

и element будет ссылкой на элемент, чей обработчик вызвал функцию.

Поскольку вы сказали, что ваши элементы управления находятся в форме, а элементы управления формы с именами сделаны с именованными свойствами формы, в которой они находятся, вы можете упростить свой код:

  var form = element.form;
  var banq = form.banq;
  var a = form.guests; // or element

Если выбранный параметр имеет значение (см. Примечания ниже), то вы можете напрямую использовать свойство value элемента select:

  if (a.value == "0") {
    banq.value = "0";

  } else if (a.value == "1") {
    banq.value = "1";
  }

и вы сделали.

Заметки:

  1. Если у параметра нет атрибута или свойства значения, его значением является текстовое содержимое. К сожалению, старые версии IE не поддерживают это, поэтому вы должны использовать select.options[select.selectedIndex].text, Но лучшая идея состоит в том, чтобы всегда давать опциям значение, таким образом вы просто получаете значение элемента select.
  2. Нет необходимости давать имена и идентификаторы элементов управления формой. У них должны быть имена, чтобы быть успешными, поэтому просто дайте им имена и забудьте идентификатор.
Источник
Другие вопросы по тегам