文章/答案/技术大牛

发布

问将setInterval应用于onchange
EN

Stack Overflow用户

提问于 2020-05-13 20:39:24

回答 2查看 114关注 0票数 0

<select id="choose-first-unit" class="span-four" onchange="setInterval(recountvol(this), 1000)">
     <option value="m3">cubic meters</option>
     <option value="cm3">cubic centimeters/milliliters</option>
     <option value="dm3">cubic decimeters/litres</option>
     <option value="hl">hectolitres</option>
     <option value="cl">centilitres</option>
</select>

<select id="choose-second-unit" class="bum" onchange="setInterval(recountvol2(this), 1000)">
    <option value="m3-2">cubic meters</option>
    <option value="cm3-2">cubic centimeters/millilitres</option>
    <option value="dm3-2">cubic decimeters/litres</option>
    <option value="hl-2">hectolitres</option>
    <option value="cl-2">centilitres</option>
</select>

我正在尝试用javascript创建一个音量转换器，我想创建一个函数，它可以在没有任何“转换/相等”按钮的情况下开始转换。我有两个选择元素来选择单位，然后是onchange函数，它做我想做的事情，但只有"onchange“。我尝试了无限循环，但那当然是滞后的，所以我尝试了setInterval()函数的所有可能的方法，但是我没有办法，这个函数总是只执行一次，所以我在这里写。

重要HTML：

<select id="choose-first-unit" class="span-four" onchange="setInterval(recountvol(this), 1000)">
     <option value="m3">cubic meters</option>
     <option value="cm3">cubic centimeters/milliliters</option>
     <option value="dm3">cubic decimeters/litres</option>
     <option value="hl">hectolitres</option>
     <option value="cl">centilitres</option>
</select>

<select id="choose-second-unit" class="bum" onchange="setInterval(recountvol2(this), 1000)">
    <option value="m3-2">cubic meters</option>
    <option value="cm3-2">cubic centimeters/millilitres</option>
    <option value="dm3-2">cubic decimeters/litres</option>
    <option value="hl-2">hectolitres</option>
    <option value="cl-2">centilitres</option>
</select>

我认为JS是正常的，因为函数只执行一次，所以我问:我应该在HTML或JS中的什么地方实现setInterval()，我应该在它内部( setInterval)做什么修改，或者它是通过错误的传递参数(如果是，你能帮我纠正它们吗)？

如果这对stackoverflow来说是一个糟糕的问题，我很抱歉，我是新来的。

javascript

html

setinterval

回答 2

Stack Overflow用户

发布于 2020-05-13 21:16:33

下面是我在没有任何JS框架的情况下如何做到这一点。

const firstUnitOptions = document.querySelector("#choose-first-unit")
const secondUnitOptions = document.querySelector("#choose-second-unit")

const firstUnitInput = document.querySelector("#firstUnitInput")
const secondUnitInput = document.querySelector("#secondUnitInput")


setInterval(() => {
const firstOption = firstUnitOptions.value
const secondOption = secondUnitOptions.value
const firstUnit = firstUnitInput.value
const secondUnit = secondUnitInput.value

if(firstOption === "m3" && secondOption === "m3-2") {
  secondUnitInput.value = firstUnitInput.value;
}

if(firstOption === "m3" && secondOption === "cm3-2") {
  secondUnitInput.value = firstUnitInput.value * 1000
}

/// rest of logic

}, 500)

<select id="choose-first-unit" class="span-four">
     <option value="m3">cubic meters</option>
     <option value="cm3">cubic centimeters/milliliters</option>
     <option value="dm3">cubic decimeters/litres</option>
     <option value="hl">hectolitres</option>
     <option value="cl">centilitres</option>
</select>

<select id="choose-second-unit" class="bum">
    <option value="m3-2">cubic meters</option>
    <option value="cm3-2">cubic centimeters/millilitres</option>
    <option value="dm3-2">cubic decimeters/litres</option>
    <option value="hl-2">hectolitres</option>
    <option value="cl-2">centilitres</option>
</select>

<input id="firstUnitInput" type="text" value="1"/>
<input id="secondUnitInput" type="text"/>

票数 0

Stack Overflow用户

发布于 2020-05-13 20:58:26

您可以使用jQuery来实现这一点。您可以从下面的代码中实现您想要的功能。

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Testing</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('select.unit').change(function() {
        var selectedUnit = $(this).children("option:selected").val();
        console.log(selectedUnit);
      });
    });
  </script>
</head>

<body>
  <select id="choose-first-unit" class="span-four unit">
    <option value="m3">cubic meters</option>
    <option value="cm3">cubic centimeters/milliliters</option>
    <option value="dm3">cubic decimeters/litres</option>
    <option value="hl">hectolitres</option>
    <option value="cl">centilitres</option>
  </select>
</body>

</html>

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61774912

复制

相似问题

问将setInterval应用于onchange
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将setInterval应用于onchangeEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将setInterval应用于onchange
EN