Applying setInterval to onchange

Question

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

I'm trying to create a volume converter with javascript and I would like to create a function, which would start converting without any "convert/equals" button. I have two select elements to choose the units and then onchange function which does what I want, but only "onchange". I tried infinite loop, but that was of course laggy, so I tried everything possible with setInterval() function, but I'm out of ideas, the function always executes only once, so I'm writing here.

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

I think that the JS is OK, because the function is executed, but only once, so I am asking: Where in the HTML or JS should I implement the setInterval(), what should I change inside it (the setInterval), or it's by wrong passed parameter (and if yes, can you correct them for me please)?

If that's a bad question for stackoverflow, I'm sorry, I'm new here.

Does this answer your question? [When do I use parenthesis and when do I not?](https://stackoverflow.com/questions/7969088/when-do-i-use-parenthesis-and-when-do-i-not) — Heretic Monkey, May 13 '20 at 13:01
You don't need `setInterval`; just check, in both event handlers, if the other field has been set. If so, do the calculation. If not, don't. You'll likely need event handlers on the inputs of the values for these units. — Heretic Monkey, May 13 '20 at 13:04

score 0 · Answer 1 · answered May 13 '20 at 13:16

Here's how I would do it without any JS framework.

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

score -2 · Answer 2 · edited May 13 '20 at 13:06

-2

You can achieve this using jQuery. You can achieve what you want from the code below.

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

edited May 13 '20 at 13:06

Heretic Monkey

10,498
6
45
102

answered May 13 '20 at 12:58

P .Mubeen

66
8

You don't need jQuery to handle something this simple. – Heretic Monkey May 13 '20 at 13:07
Yes, but it was handy and on my mind so answered it so that the person asked gets a solution. – P .Mubeen May 13 '20 at 13:09
This doesn't have setInterval. – Cary Mar 12 '21 at 16:47
This code doesn't need a set interval method because it is triggered when a dropdown value is changed @Cary – P .Mubeen Mar 27 '21 at 05:26

Applying setInterval to onchange

2 Answers2