How to return value from a function launched inside a switch statement?

Question

I have the following switch statement. All the cases work including the 'custom' case. the only challenge is that I am unable to return the radval from the 'custom' case. It shows the right value if I do it in the console log. I have tried several options mentioned in the comment below but none works.

    document.body.addEventListener('change', function (e) {
            let target = e.target;
            let responsible;
            let radval = 0.5;;
            let yourshare;
            switch (target.id) {
            case '100':
                    radval = 100/100;
                    break;
            case '50':
                    radval = 50/100;
                    break;
            case '25':
                    radval = 25/100;
                    break;
            case '75':
                    radval = 55/100;
                    break;

            case '33':
                    radval = 33/100;
                    break;
            case '0':
                    radval = 0;
                    break;
            case 'custom': 
                    document.getElementById('customsplit').onchange = function () {
                            let custval = document.getElementById("customsplit");
                            radval = custval.value / 100;
                            return(radval);  
// Also tried return radval and tried a function outside the switch statement that was called here.  But no success.
                    }
                   break;

    }

Returning a number from a change listener doesn't make any sense - return values inside handlers only check to see if `false` is returned (for bubbling/delegation) — CertainPerformance, Jan 17 '22 at 03:49
Ok, I am new to JS and I went through quite a bit blogs and articles but couldn't find anything. In this case the custom is a non-radio number input so that a user can enter some random number such as 22 instead of a radio button. I'm not sure how would I go from here. Thus the question. — techwestcoastsfosea, Jan 17 '22 at 03:57
The value inside the function isn't generated until much later, when the user changes the element, by which time the function that assigned the event handler is long since finished. — Quentin, Jan 17 '22 at 09:32

Cat · Answer 1 · 2022-01-17T09:50:01.167

Here's a different way of solving this problem.

The in-code comments should make clear how everything works.

// Lets us select some DOM elements
const
  container = document.getElementById("container-div"),
  customInput = document.getElementById("customsplit"),
  checkedRadioSelector = 'input[name="radios"]:checked';

// Stores our value, which will be changed by `setGlobalVal()`
let globalVal;

// Calls `update` whenever one of the inputs changes
container.addEventListener("change", update);


// Defines the listener
function update(ev){

  // Gets the active radio button, its value, and the custom value
  let
    activeRadio = document.querySelector(checkedRadioSelector),
    radioVal = activeRadio?.value, // 'optional chaining' in case no active radio
    customVal = customInput.value;

  // `customVal` IF radio = 'custom' AND customVal converts to int
  if(radioVal == "custom" && (customVal = parseInt(customVal)) >= 0){
    setGlobalVal(customVal/100);
  }
      
  // `radioVal` IF a radio changed AND radioVal converts to int
  else if (ev.target.name == "radios" && (radioVal = parseInt(radioVal)) >= 0){
    setGlobalVal(radioVal/100);
  }
  else{ /* Does nothing if neither set of conditions is met */ }
}

// Defines the setter
function setGlobalVal(newValue){
  globalVal = newValue;
  console.log(`new value set: ${globalVal}`);
}

label{ margin-right: 1em; }
#custom-fields{ margin-top: 1em; }

<div id="container-div">
    <label><input type="radio" name="radios" value="100" />100</label>
    <label><input type="radio" name="radios" value="75" />75</label>
    <label><input type="radio" name="radios" value="50" />50</label>
    <label><input type="radio" name="radios" value="33" />33</label>
    <label><input type="radio" name="radios" value="25" />25</label>
    <label><input type="radio" name="radios" value="0" />0</label>
    <div id="custom-fields">
        <label><input type="radio" name="radios" value="custom" />custom:</label>
        <label><input type="number" id="customsplit" min="0" max="100"></label>
    </div>
</div>

How to return value from a function launched inside a switch statement?

1 Answers1