Here is one approach; in this approach I've removed the use of unnecessary JavaScript (show/hide functionality can be easily achieved in CSS with this structure), I've wrapped most of the <input> elements in <label> elements to make them more-easily understood by the user, and easier to focus by clicking/touching the text as well as the <input> itself.
I've also set the <button> element's type attribute to button, which means it won't attempt to submit the form when it's clicked.
Further, as I pointed out in the comment to your question there is no return value from console.log(), so JavaScript receives undefined which is then passed to parseInt() and converts that to NaN; which isn't an available value in the range <input>.
Further guidance and explanatory comments in the code, below:
// use meaningful names in development (they can be easily minimised
// during the build process):
function calculate() {
// using document.querySelectorAll() get all elements matching the CSS
// selector passed to the function; we use the Array-literal and spread
// syntax to convert the NodeList to an Array, and then pass that Array
// of nodes to Array.prototype.map() to return a new Array based on that
// initial Array of Nodes:
const values = [...document.querySelectorAll('input[type=number]')].map(
// here we pass the <input> element-node into the Arrow function, and
// return the parsed value of the current <input> node in base 10:
(input) => parseInt(input.value, 10)
),
// here we reduce the Array of entered values using Array.prototype.reduce()
// to create a sum of the values in that Array of values:
sum = values.reduce((acc, curr) => {return acc + curr.value}, 0);
// here we retrieve the range input via its 'id', and set its value
// to the sum:
document.querySelector('#ran').value = sum;
}
// retrieving the <button> element, and using EventTarget.addEventListener() to
// bind the calculate() function as the event-handler for the 'click' event:
document.querySelector('button').addEventListener('click', calculate);
body {
background-color: black;
box-sizing: border-box;
color: white;
font: 1rem / 1.5;
margin: 0;
padding: 0;
}
#ss {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 1em auto;
width: 90vw;
}
/* we select the #ss element that is the immediately-adjacent
sibling of the <input> with the name-attribute set to 'ABA'
and style it as 'display: none' */
input[name=ABA] + #ss {
display: none;
}
/* here we select the #ss element that is the immediately-adjacent
sibling of the <input> with the name-attribute set to 'ABA'
when that <input> is checked, to make #ss visible when the <input>
is checked, and hidden when not-checked: */
input[name=ABA]:checked + #ss {
display: flex;
}
<form>
<input type="checkbox" name="ABA" value="Applied Behaviour Analysis">Applied Behaviour Analysis
<div id="ss">
<label>
Input One value:
<input type="number" id="myText" value="">
</label>
<label>
Input Two value:
<input type="number" id="my" value="">
</label>
<button type="button">calculate</button>
<label>
Calculated Value:
<input type="range" id="ran" value="0">
</label>
</div>
</form>
References:
