JavaScript Цикл по опциям выбора

Я пытаюсь пройти через форму выбора, чтобы увеличивать значение выбранной опции при каждом ее нажатии. Я поискал, но не нашел то, что мне нужно ... Вот html

var counter = 0;
function myFn(){
  var myOptionIndex = document.getElementById('selectForm').selectedIndex;
  var myOptionValue = document.getElementById('selectForm').value;
  var myOption = document.getElementById('selectForm').options;

  for (var i = 0; i < myOption[myOptionValue].value; i++) {
    counter++;
  }

  document.getElementById('results').innerHTML = myOption[myOptionIndex].text 
  + " has been selected " + counter + " times";
}

<form action = "" id = "voteForm">
    <select name = "select-form" id = "selectForm">
        <option value = "1"> Option 1</option>
        <option value = "1"> Option 2</option>
    </select>
    <button type = "button" id = "castVote" onclick = "myFn();">Cast Your 
    Vote
   </button>        
</form>
<div id = "results"></div>

Вы пытаетесь увеличивать значение на 1 при каждом нажатии?

— 22.06.2018 02:21

Изменить значение выбранного параметра. document.getElementById('selectForm').options[myOptionIndex]‌.value = 'new value'

— 22.06.2018 02:52

javascript html forms loops increment

22.06.2018 01:57

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

3 703

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Прошу прощения за мой английский. По сути - скрипт будет работать только при изменении формы. То есть, если был выбран первый вариант, а выбрать его снова - счетчик не увеличится.

let increase=()=>results.innerText=`${selectForm.options[selectForm.selectedIndex].innerText} has been selected ${selectForm.options[selectForm.selectedIndex].value++} times`;
voteForm.addEventListener('change',increase);

<form id = "voteForm" action = "">
  <select id = "selectForm" name = "select-form">
    <option value = "1"> Option 1</option>
    <option value = "1"> Option 2</option>
  </select>
  <button id = "castVote" type = "button">
    Cast Your
    Vote
  </button>
</form>
<div id = "results"></div>

Нажатие на кнопку не увеличивает количество голосов за выбранный вариант. Он учитывается только при изменении выбора меню.

— 22.06.2018 02:33

Я понимаю, что это всего лишь пример, но использование идентификаторов элементов в качестве глобальных переменных - действительно плохая идея. Если ваше намерение - меньше кода, тогда selectForm.options[selectForm.selectedIndex].innerText может быть selectForm.value (но имеет тот же идентификатор / глобальную проблему).

— 22.06.2018 02:35

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

— 22.06.2018 02:41

22.06.2018 02:25

Вы никогда не меняете значение параметра, вы просто обновляете переменную counter. Эта одна переменная не содержит информации о каждой опции.

Нет необходимости в цикле, просто используйте выбранный индекс.

И вы должны установить начальные значения параметров в 0, поскольку ни один из них еще не получил голосов.

var counter = 0;
function myFn(){
  var myOption = document.getElementById('selectForm').options;
  var myOptionIndex = document.getElementById('selectForm').selectedIndex;
  var myOptionValue = myOption[myOptionIndex].value;
  myOptionValue++;
  myOption[myOptionIndex].value = myOptionValue;

  document.getElementById('results').innerHTML = myOption[myOptionIndex].text 
  + " has been selected " + myOptionValue + " times";
}

<form action = "" id = "voteForm">
    <select name = "select-form" id = "selectForm">
        <option value = "0"> Option 1</option>
        <option value = "0"> Option 2</option>
    </select>
    <button type = "button" id = "castVote" onclick = "myFn();">Cast Your 
    Vote
   </button>        
</form>
<div id = "results"></div>

22.06.2018 02:37

Ответ принят как подходящий

На самом деле вам не нужен счетчик. Вы можете использовать переменную myOptionValue, так как она равна фактическому значению выбранной опции. Кроме того, петля for также не нужна. У вас уже есть переменная myOptionIndex, которая равна индексу выбранного option. Теперь вам просто нужно увеличить значение myOptionValue в функции и отобразить эту переменную вместо counter в вашем results - div. Это выглядело бы так:

function myFn(){
      var myOptionIndex = document.getElementById('selectForm').selectedIndex;
      var myOptionValue = document.getElementById('selectForm').options[myOptionIndex].value;
      var myOption = document.getElementById('selectForm').options;
    myOptionValue++;
    document.getElementById('selectForm').options[myOptionIndex].value++;
      document.getElementById('results').innerHTML = myOption[myOptionIndex].text 
      + " has been selected " + myOptionValue + " times";
}

Здесь также демонстрация этого примера в jsfiddle.

22.06.2018 04:24