Блог

Главная - Вопросы по программированию - как я могу отобразить выбранное значение в текстовом поле ввода

как я могу отобразить выбранное значение в текстовом поле ввода

#javascript #html

#javascript #HTML

Вопрос:

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

 <input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval" onClick="checkVal()">
<select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems">
  <option value="">Select</option>
  <option value="RUB Dollar">RUB</option>
  <option value="AFN Dinaar">AFN</option>
  <option value="EUR Dollar">EUR</option>
</select>

<script>
  var select = document.getElementById('rupeeitems');
  var input = document.getElementById('txtval');
  select.onchange = function () {
    input.value = select.value;
  }
</script>
<!-- This one is working properly -->
<input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice" onClick="checkPrice()">
<select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems">
  <option value="">Select</option>
  <option value="USD Dollar">USD</option>
  <option value="Euro Dollar">EUR</option>
  <option value="Aud Dollar">AUD</option>
  <option value="Bahrien ">BHD</option>
</select>
<script>
  var select = document.getElementById('cmbitems');
  var input = document.getElementById('txtprice');
  select.onchange = function () {
    input.value = select.value;
  }
</script>

Комментарии:

1. Выполняйте все свои сценарии в конце html-документа, непосредственно перед конечным </body> тегом, внутри одного <scipt> // javascript goes here </script>

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

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

4. И измените </select </select> до последнего тега скрипта!

5. Как сказал фантанонио, вы повторно объявляете глобальные переменные select и input . Либо используйте уникальные имена глобальных переменных, либо ограничьте область ваших объявлений.

Ответ №1:

Вы должны быть более конкретны в именах переменных. Кроме того, вы можете использовать this ключевое слово для ссылки на текущий элемент select внутри функции. Не уверен, почему вы используете встроенный обработчик событий:

 <input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval">
<select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems">
  <option value="">Select</option>
  <option value="RUB Dollar">RUB</option>
  <option value="AFN Dinaar">AFN</option>
  <option value="EUR Dollar">EUR</option>
</select>

<!-- This one is working properly -->
<input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice">
<select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems">
  <option value="">Select</option>
  <option value="USD Dollar">USD</option>
  <option value="Euro Dollar">EUR</option>
  <option value="Aud Dollar">AUD</option>
  <option value="Bahrien ">BHD</option>
</select>
<script>
  var selectRupee = document.getElementById('rupeeitems');
  var inputRupee = document.getElementById('txtval');
  selectRupee.onchange = function() {
    inputRupee.value = this.value;
  }

  var selectCmb = document.getElementById('cmbitems');
  var inputCmb = document.getElementById('txtprice');
  selectCmb.onchange = function() {
    inputCmb.value = this.value;
  }
</script>

Ответ №2:

Как упоминалось ранее в комментариях @Gabriel Lupu, вам лучше записать весь код js внутри одного <script> тега в конце страницы перед <body> тегом.

Этот код работает:

 <input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval" onClick="checkVal()">
<select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems">
    <option value="">Select</option>
    <option value="RUB Dollar">RUB</option>
    <option value="AFN Dinaar">AFN</option>
    <option value="EUR Dollar">EUR</option>
</select>

<!-- This one is working properly -->
<input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice" onClick="checkPrice()">
<select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems">
    <option value="">Select</option>
    <option value="USD Dollar">USD</option>
    <option value="Euro Dollar">EUR</option>
    <option value="Aud Dollar">AUD</option>
    <option value="Bahrien ">BHD</option>
</select>

<script>
    var select = document.getElementById('rupeeitems');
    var input = document.getElementById('txtval');
    select.onchange = function () {
        input.value = select.value;
    }
    var select2 = document.getElementById('cmbitems');
    var input2 = document.getElementById('txtprice');
    select2.onchange = function () {
        input2.value = select2.value;
    }
</script>

Вы должны правильно закрыть </select> и использовать разные имена для переменных, иначе вы переназначаете их значения.

Ответ №3:

Пожалуйста, в следующий раз используйте правильный отступ. Код трудно читать, если он не отформатирован должным образом.

Эту проблему очень просто решить, и вам следует изучить const , let и var и их соответствующие различия.

 <input type="button" class="btn btn-sm btn-w1" name="txtval" id="txtval" onClick="checkVal()">
  <select class="lbbg selsm-2 inblock-2 " name="rupeeitems" id="rupeeitems">
     <option value="">Select</option>
     <option value="RUB Dollar">RUB</option>
     <option value="AFN Dinaar">AFN</option>
     <option value="EUR Dollar">EUR</option>
  </select>
                                        

<input type="button" class="btn btn-sm btn-w1" name="txtprice" id="txtprice" onClick="checkPrice()">
  <select class="lbbg selsm-2 inblock-2 " name="cmbitems" id="cmbitems">
   <option value="">Select</option>
   <option value="USD Dollar">USD</option>
   <option value="Euro Dollar">EUR</option>
   <option value="Aud Dollar">AUD</option>
   <option value="Bahrien ">BHD</option>
  </select>

// place your scripts here
<script>

  // use descriptive variable names

  const cmbItems = document.getElementById('cmbitems');
  const txtPrice = document.getElementById('txtprice');

  const rupeeItem = document.getElementById('rupeeitems');
  const txtVal =  document.getElementById('txtval');

  // since you are using anonimous functions
  // if you browser allows, use ES6 syntax

  cmbItems.onchange  = () => txtPrice.value = this.value;
  rupeeItem.onchange = () => txtPrice.value = this.value;

</script>