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