我究竟做错了什么？从下拉列表中选择 Java脚本

编程问答 2022-06-09

问题描述

由于某种原因，我 无法正常工作。我是JS的新手（一般来说对编码还很陌生），我已经研究了几个小时，并且也在这里搜索。我看不到代码有什么问题。

我正在尝试从选择选项列表中检索值。我想在另一个函数中使用该值。

这是我正在尝试的方法，即使我认为应该，“ Vocation”也不会更改为值。

<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是所选选项的值。我在做什么错了？

解决方法

您已经编写了代码，但是没有什么东西可以指定代码何时运行。您需要使用函数并将其转变为“事件处理程序”。

<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>

了解有关事件和事件处理的更多信息here。

drop-down-menufunctionfunctionfunctionjavascriptselection