Что я делаю не так? Получить выделение из выпадающего списка. Javascript

#javascript #function #drop-down-menu #selection

#javascript #функция #выпадающее меню #выделение

Вопрос:

По какой-то причине я не могу заставить это работать. Я новичок в JS (и довольно новичок в кодировании в целом), и я просматривал его в течение нескольких часов и искал здесь. Я не вижу, что не так с моим кодом.

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

Это то, что я пытаюсь, и «Призвание» не меняется на значение, хотя я считаю, что так и должно быть.

 <body>
<div class="wooh" style="width:200px;margin: 25px;">
  <select id="Vocation">
    <option value="0">Select Voc:</option>
    <option value="3.0">EK</option>
    <option value="1.4">RP</option>
    <option value="1.1">ED</option>
    <option value="1.1">MS</option>
  </select>
  
  <p id="result">Vocation</p>
</div>

<script>
// Edit your script here
function selection() {
  var x = document.getElementById("Vocation").value;
  document.getElementById("result").innerHTML = x;
}
</script>

Моя конечная «цель» — передать значение этой функции:

   var x = document.getElementById("level").value;
  var y = [value here]
  var z = 1600
  var a = 305000
  document.getElementById("result").innerHTML =  Math.ceil((z * Math.pow(y, x))/305000);

Где y должно быть значением из выбранной опции. Что я делаю не так?

Ответ №1:

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

 <div class="wooh" style="width:200px;margin: 25px;">
  <select id="Vocation">
    <option value="0">Select Voc:</option>
    <option value="3.0">EK</option>
    <option value="1.4">RP</option>
    <option value="1.1">ED</option>
    <option value="1.1">MS</option>
  </select>
  
  <p id="result">Vocation</p>
</div>

<script>
  // You will be needing to refer to the result element more than once, so
  // just scan the document for it one time and cache the reference
  let result = document.getElementById("result");

  // Get a reference to the <select> element and bind a function to its change
  // event, which will trigger any time the select's value changes
  document.getElementById("Vocation").addEventListener("change", function() {
    // Because this function is bound to the select, when it is triggered
    // "this" will be an automatic reference to the select. 
    
    // Don't use .innerHTML when the string you are working with doesn't
    // contain any HTML because .innerHTML has security and performance
    // implications. For plain text, use .textContent
    result.textContent = this.value;
  });
</script>

Узнайте больше о событиях и обработке событий здесь .

1. Спасибо. Мне нужно прочитать об этом, это отлично помогло.

2. @austriker Всегда пожалуйста. Не забудьте отметить это как ответ «the», щелкнув галочку в левом верхнем углу ответа.