Как изменить переменную с изменением опции выбора в форме html? - PullRequest
Новая
       0

Как изменить переменную с изменением опции выбора в форме html?

0 голосов
/ 21 марта 2020

Я пытаюсь изменить свою переменную "year" всякий раз, когда пользователь меняет свой ответ в списке выбора в моей форме html. Я хочу изменить «год» на любой год, выбранный в настоящее время, поэтому, если пользователь выбирает «2022», я хочу, чтобы мой переменный год был равен 2022. Я попытался использовать «событие» в качестве параметра для моей функции setYear (), но это было неудачно. Любая помощь будет принята с благодарностью. 

var year;

<script type="text/javascript">
    function setYear(a) {
        year = a;
    }
</script>

<form>
    <tr>
        <td>Year: </td>
        <td><select name="Year" onchange="setYear(event)">
            <option value="2020">2020</option>
            <option value="2021">2021</option>
            <option value="2022">2022</option>
        </select></td>
    </tr>
</form>

Ответы [ 5 ]

1 голос
/ 21 марта 2020

Ваш код: 

var year;

<script type="text/javascript">
    function setYear(a) {
        year = a;
    }
</script>

<form>
    <tr>
        <td>Year: </td>
        <td><select name="Year" onchange="setYear(event)">
            <option value="2020">2020</option>
            <option value="2021">2021</option>
            <option value="2022">2022</option>
        </select></td>
    </tr>
</form>

Вы объявляете переменную var вне тега <script>. Поскольку var объявлен вне тега <script>, он не будет виден функции javaScript.
Кроме того, вы устанавливаете var в качестве аргумента события. Этот код может работать. 



<script type="text/javascript">
    var year;
    function setYear(a) {
        year = a;
    }
</script>

<form>
    <tr>
        <td>Year: </td>
        <td><select name="Year" onchange="setYear(this.value)">
            <option value="2020">2020</option>
            <option value="2021">2021</option>
            <option value="2022">2022</option>
        </select></td>
    </tr>
</form>
0 голосов
/ 21 марта 2020

Прежде всего не следует использовать <td> и <tr> без тега <table>.
Тег <tr> определяет строки таблицы. Тег <td> определяет стандартные ячейки в таблице.

Затем в событии onchange вы должны передать this в качестве параметра. Он будет ссылаться на элемент select DOM вашего HTML. Теперь вы сможете узнать, какой год был выбран.

select.options[select.selectedIndex].value;
выберите: Ваш элемент DOM.
опции: Все опции, выбранные вами в качестве массива
select.selectedIndex: Индекс, выбранный пользователем (соответствует числу)
значение: значение выбранного варианта. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    <form>
      <label>Year:</label>
      <select name="Year" onchange="setYear(this)">
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
      </select>
     </form>
  </body>

  <script type="text/javascript">
    var year;
    function setYear(select) {
        year = select.options[select.selectedIndex].value;
    }
  </script>
</html>
0 голосов
/ 21 марта 2020

Вы можете использовать this для ссылки на выбранный элемент DOM: 

<script type="text/javascript">
  let year
  function setYear(a) {
    year = a
  }
</script>

<select name="Year" onchange="setYear(this.value)">
  <option value="2020">2020</option>
  <option value="2021">2021</option>
  <option value="2022">2022</option>
</select>

Inline JavaScript, хотя это немного устарело. Для более современного подхода используйте document.querySelector, чтобы получить узел DOM, и зарегистрируйте прослушиватель событий, который срабатывает при его изменении. Таким образом, вам не нужно смешивать HTML и JS: 

<script type="text/javascript">
  let year
  const yearSelect = document.querySelector('#yearSelect')

  yearSelect.addEventListener('change', e => {
    year = e.target.value
  })
</script>

<select id="yearSelect" name="Year">
  <option value="2020">2020</option>
  <option value="2021">2021</option>
  <option value="2022">2022</option>
</select>
0 голосов
/ 21 марта 2020

сначала определите var year определите внутри script, а затем получите a.target.value и используйте его, когда захотите 

<script type="text/javascript">
var year;
    function setYear(a) {
        year = a.target.value;
        console.log(year);
    }
</script>
0 голосов
/ 21 марта 2020

  • Не объявлять var вне сценария. 

     <script type="text/javascript">
    var year;
    function setYear(a) {
        year = a.target.value;
    }
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...