We Keep Coding

Javascript Control enabling/disabling page scrolling from within a section

I have a section containing some radio buttons and other HTML elements.
When scrolling the page reached to the section, I need to like disable the scroll of the page and instead show some styles on the radios. After reaching to last radio button, enable to scroll the page.
var enabaled = true;
window.onload = function() {
function checkVisibilityOfDiv() {
var target = $(".scene44").offset().top;
if ($(window).scrollTop() >= target ) {
return true;
}
return false;
}
function enableScroll() {
window.onscroll = function () {
};
}
function disableScroll() {
// Get the current page scroll position
scrollTop =
window.pageYOffset || document.documentElement.scrollTop;
scrollLeft =
window.pageXOffset || document.documentElement.scrollLeft,
// if any scroll is attempted,
// set this to the previous value
window.onscroll = function () {
window.scrollTo(scrollLeft, scrollTop);
};
}
let amount = 0;
let current = 1;
let max = 7;
var lastScrollTop = 0;
document.addEventListener('scroll', () => {
if (checkVisibilityOfDiv() ) {
var st = window.pageYOffset || document.documentElement.scrollTop;
amount++;
if (amount >= 9) {
amount = 0;
if (st > lastScrollTop ) { //detect scroll direction
// downscroll code
console.log(" down, " + current);
if(current===1 && enabaled=== true){
disableScroll();
enabaled=false;
}
document.getElementById('r' + current).checked = false;
//If you reach the last radio element you reset the counter
if (current === max) {
document.getElementById('r' + current).checked = true;
} else {
current += 1;
document.getElementById('r' + current).checked = true;
}
} else {
// upscroll code
console.log(" up, " + current);
amount = 0;
document.getElementById('r' + current).checked = false;
//If you reach the first radio element you reset the counter
if (current === 1) {
document.getElementById('r' + current).checked = true;
} else {
if (current === max) {
current -= 1;
if( enabaled=== true){
disableScroll();
enabaled=false;
}
} else {
current -= 1;
document.getElementById('r' + current).checked = true;
}
}
}
}
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}else {
enableScroll();
}
}, false);
};
<div class="scene44" id="scene44">
<input type="radio" name="buttons" id="r1" checked>
<input type="radio" name="buttons" id="r2">
<input type="radio" name="buttons" id="r3">
<input type="radio" name="buttons" id="r4">
<input type="radio" name="buttons" id="r5">
<input type="radio" name="buttons" id="r6">
<input type="radio" name="buttons" id="r7">
<p class="discp">
We discover your potential.
</p>
<div class="controls">
<label for="r1"><span></span>
<div>LAB & Process Development</div></label>
<label for="r2"><span></span><div>Quality & Regulatory</div></label>
<label for="r3"><span></span><div>Engineering & Project Management</div></label>
<label for="r4"><span></span><div>EHS</div></label>
<label for="r5"><span></span><div>Specialized Services</div></label>
<label for="r6"><span></span><div>Data Science LAB</div></label>
<label for="r7"><span></span><div>Technology & Science LAB</div></label>
</div>
<div class="container" >
<div class="leftimage-container">
<div class="box topleft"></div>
<div class="box backleft"></div>
<div class="box bottomleft"></div>
<div class="box frontleft" ></div>
</div>
<div class="centerimage-container">
<div class="box frontcenter"></div>
<div class="box backcenter"></div>
<div class="box bottomcenter"></div>
<div class="box topcenter"> </div>
</div>
<div class="rightimage-container">
<div class="box topright"></div>
<div class="box backright"></div>
<div class="box bottomright"></div>
<div class="box frontright"></div>
</div>
</div>
</div>
I've faced 2 problems; First, it's not working correctly as you can see.
Second, I logged some text and realized that the snippet code detecting the scroll direction does not work exactly.
How can I fix them?

I want the enter key press to work as submit button and run the js function

I want if user enter the value and press enter key instead of submit button. The function calvol() should run and give the result.
HTML
<body>
<div class="container-fluid">
<div class="row inpdip">
<div class="col diptext">
<label for="dip">Dip</label>
</div>
<div class="col">
<input type="number" class="inpbox" id="dip">
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col">
<button class="btn btn-dark" id="myBtn" type="submit" onclick="calvol()">Submit</button>
</div>
</div>
<div class="row outputvol">
<div class="col diptext ">
Volume :
</div>
<div class="col">
<span class="" id="result"></span>
</div>
</div>
</body>
JavaScript
function calvol() {
var R = 10.5;
var L = 62.5;
var inputh = document.getElementById('dip').value;
if (inputh>210){
document.getElementById('result').innerHTML = "Dip is over the tank limit." ;
} else if (inputh<= 0) {
document.getElementById('result').innerHTML = "Enter a higher number" ;
} else {
var h = inputh/10;
let TankVolume = L * (R * R * Math.acos((R - h)/ R) - (R - h) * Math.sqrt(2 * R * h - h * h));
let volume = Math.round(TankVolume);
console.log(volume)
document.getElementById('result').innerHTML = volume +" Liter" ;
}
}
var input = document.getElementById("dip");
input.onkeyup = function(e){
if(e.keyCode == 13){
calvol();
}
}
I want if user enter the value and press enter key instead of submit button. The function calvol() should run and give the result.

Is there anyway to clear a textarea without using an onclick function?

I want to achieve an automatic clear and display another value corresponds to new inputted data
This is my html code for input data and text area
function getInputValue(){
var integer = document.getElementById("integer").value;
var text = document.getElementById("answer");
for (var i = 1; i <= integer; i++) {
if (i % 15 == 0){
text.append( i, "= ","fizzbuzz\n")
}
else if (i % 3 == 0){
text.append( i, "= ","fizz \n")
}
else if (i % 5 == 0){
text.append( i, "= ","buzz \n")
}
else{
text.append(i, "= \n")
}
}
}
<div class="form-floating mb-3">
<input class="form-control" id="integer" onChange="getInputValue()" type="text" placeholder="Input an Integer for N" data-sb-validations="required" />
<label for="integer">Input an Integer for N</label>
</div>
<div class="col-lg-6 form-floating answer mb-3">
<textarea disabled class="form-control" id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea>
</div>
If you will try to run the snippet you can see that if you will change the value in the input tag the textarea will just stack all the outputs

Because you are using append() always it is always adding to content. Just clear it everytime onChange is triggered so it resets. You can use :
text.innerHTML = '';
function getInputValue(){
var integer = document.getElementById("integer").value;
var text = document.getElementById("answer");
text.innerHTML = '';
for (var i = 1; i <= integer; i++) {
if (i % 15 == 0){
msg = i + "fizzbuzz";
text.append( i, "= ","fizzbuzz\n")
}
else if (i % 3 == 0){
text.append( i, "= ","fizz \n")
}
else if (i % 5 == 0){
text.append( i, "= ","buzz \n")
}
else{
text.append(i, "= \n")
}
}
}
<div class="form-floating mb-3">
<input class="form-control" id="integer" onChange="getInputValue()" type="text" placeholder="Input an Integer for N" data-sb-validations="required" />
<label for="integer">Input an Integer for N</label>
</div>
<div class="col-lg-6 form-floating answer mb-3">
<textarea disabled class="form-control" id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea>
</div>

Here is the solution:
let inputEl = document.querySelector('#integer')
let answerEl = document.querySelector('#answer')
inputEl.addEventListener('input', () => {
answerEl.value = ''
if (inputEl.value !== '') {
answerEl.value = getInputValue()
}
})
function getInputValue() {
var integer = inputEl.value;
var text = '';
for (var i = 1; i <= integer; i++) {
if (i % 15 == 0) {
text += i +"= fizzbuzz\n"
} else if (i % 3 == 0) {
text += i +" = fizz \n"
} else if (i % 5 == 0) {
text += i +" = buzz \n"
} else {
text += i +" = \n"
}
}
return text
}
<div class="form-floating mb-3">
<input class="form-control" id="integer" type="text" placeholder="Input an Integer for N" data-sb-validations="required" />
<label for="integer">Input an Integer for N</label>
</div>
<div class="col-lg-6 form-floating answer mb-3">
<textarea disabled class="form-control" id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea>
</div>
For context.
Remove the inline onChange="getInputValue()"
Setup getInputValue as a return type
Check if input is empty else run function

As far as I can see here, there isn't a way to clear a textarea without using an onclick function.

Try using the oninput event instead of the onchange event.

NaN or 0 shows up in sum up

In the process of summing up input values, overall is always showed up NaN or O ( sum up function below). I can't sum values up. All values are Number and their variable also Number according to the console information. Everywhere I use parseInt and Number methods.
The sum up function is also used with parseInt method. I had to add the logical operator || in the sum up function, after that, it always showed up 0.
// points declaration for rate determenation
$(function () {
$("#name_vehicle").change(function () {
var vehicle_value = $(this).val(),
vehicle_point = $("#vehicle_point").val();
vehicle_point = ( vehicle_value == "1" ) ? 1 :
( vehicle_value == "2" ) ? 1 :
( vehicle_value == "3" ) ? 1 :
( vehicle_value == "4" ) ? 1 :
( vehicle_value == "5" ) ? 1:
(vehicle_value == "6" ) ? 2 : 0;
$("#vehicle_point").val( vehicle_point );
console.log ( vehicle_point );
});// end change
}); // end ready
$(function () {
$("#term").change(function () {
var tv = $(this).val();
var tp = $("#term_point").val();
tp = ( tv == "1") ? 24:
( tv == "2") ? 36 :
( tv == "3") ? 48:
( tv == "4") ? 60 : 0;
$("#term_point").val( tp );
console.log ( tp );
}); // end change
}); // end ready
$(function () {
$("input").change(function () {
var cp = parseInt($("input[name=carPrice").val());
var d = parseInt($("input[name=deposit").val());
var ae = parseInt($("input[name=add_equip").val());
var c = parseInt ($("input[name=casco]").val());
var tp = parseInt($("input[name=term_point").val());
var result = ( ( cp + ae ) - d + c );
var pd = ((d / ( cp + ae )) * 100); // DEPOSIT IN %
$("#overall").val( result );
console.log ( result );
$("#p_deposit").val( pd );
console.log ( pd );
console.log ( typeof pd );
var cl_points = parseInt($("input[name=cl_points").val());
var bl_points = parseInt($("input[name=bl_points").val());
if ( pd >= 20 && pd < 39.99 ) {
cl_points = 1;
bl_points = 1;
}
else if ( pd > 39.99 && pd < 49.99) {
cl_points = 1;
bl_points = 5;
}
else if ( pd > 49.99 && pd <= 55 ) {
cl_points = 1;
bl_points = 5;
}
else if ( pd > 55 && pd < 99.99 ) {
cl_points = 1;
bl_points = 0;
}
$("#cl_points").val( cl_points );
$("#bl_points").val( bl_points );
console.log ( cl_points );
console.log ( bl_points );
}); // end change
}); // end ready
$(function () {
var sum = 0;
$(".points").each(function () {
sum += parseInt($(this).val()) || 0;
$("#overallPoints").val( sum ) ;
console.log (sum);
console.log ( typeof sum);
}); // end each
}); // end ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- first header-->
<div class="image-container">
<div class="text"></div>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<!-- box one-->
<i class="fa fa-car" id="v1" style="font-size:84px;color:white"><span class="w1">А</span></i>
<form>
<div class="form-group">
<label class="l1" for="name_vehicle">В</label>
<select multiple class="form-control" id="name_vehicle">
<option value="1">A</option>
<option value="2">T</option>
<option value="3">Q</option>
<option value="4">X</option>
<option value="5">M</option>
<option value="6">J</option>
</select>
<input type="text" class="points" id="vehicle_point" style="display:none">
<!-- POINT ONE-->
</div>
</form>
<form>
<div class="form-group">
<label class="l1" for="carPrice">С:</label>
<input type="text" class="form-control" id="carPrice" name="carPrice" value="0">
</div>
<div class="form-group">
<label class="l1" for="add_equip">о:</label>
<input type="text" class="form-control" id="add_equip" name="add_equip" value="0">
</div>
</form>
</div>
<div class="col-lg-4">
<!-- box two-->
<i class="fa fa-money" style="font-size:84px;color:white"><span class="w1">К</span></i>
<form>
<div class="form-group">
<label class="l1" for="deposit">П</label>
<input type="text" class="form-control" id="deposit" name="deposit" value="0">
<input type="text" id="car_loan" style="display:none" name="car_loan">
<!-- CAR LOAN SUM-->
</div>
<div class="form-group">
<label class="l1" for="term">С</label>
<select multiple class="form-control" id="term">
<option value="1">24 </option>
<option value="2">36 </option>
<option value="3">48 </option>
<option value="4">60 </option>
</select>
<input type="text" class="points" id="term_point" style="display:none" name="term_point">
<!-- POINT TWO-->
</div>
<div class="form-group">
<label class="l1" for="casco">К:</label>
<input type="text" class="form-control" id="casco" name="casco" value="0">
<input type="text" id="overall" style="display:none" name="overall">
<!--SUM UP-->
<input type="text" id="p_deposit" style="display:none">
<!-- DEPOSIT IN %-->
<input type="text" class="points" id="p_deposit_point" style="display:none" name="p_deposit_point">
<!-- POINT THREE-->
</div>
</div>
</div>

First when you have a number, you do not have to use Number() to ensure it is a number.
The logic here is wrong:
(tv == "1") ? tp = Number(24): Number(0);
(tv == "2") ? tp = Number(36): Number(0);
(tv == "3") ? tp = Number(48): Number(0);
(tv == "4") ? tp = Number(60): Number(0);
You can not use a ternary operator here for this. When you say tv=2, first one will set it to zero, second would set it to 36, third will set it back to 0.
A ternary operator would have to look like:
(tv == "1") ? tp = Number(24):
(tv == "2") ? tp = Number(36):
(tv == "3") ? tp = Number(48):
(tv == "4") ? tp = Number(60): Number(0);
But that really makes little sense to do.
You would be better off to use a switch statement of if/else if
switch (tv) {
case "1": tp = 24; break;
case "2": tp = 36; break;
case "3": tp = 48; break;
case "4": tp = 60; break;
case default: tp = 0; break;
}
Same thing applies with vehicle point.

Output based on two inputs

I'm trying to make this "Should I take this test or that test" Calculator. Nothing is output when I put in both values, so I'm looking for the error in my code. Thanks!
document.getElementById("test2score").onkeyup = function() {
WhichTestFunction()
};
function WhichTestFunction() {
var t1 = document.getElementById('test1score').value;
var t2 = document.getElementById('test2score').value;
if (t1 == 9) && (t2 < 120) {
score = "Take Test 1";
}
else if (t1 == 9) && (t2 > 140) {
score = "Take Test 2";
}
else if (act == 9) && (sat >= 120) && (sat <= 140) {
score = "Toss up. Take the test you like better based on format and content.";
}
document.getElementById("testscore").innerHTML = score;
}
<section id="" class="">
<div class="container text-center">
<div class="col-md-6 col-md-offset-1">
<h2><b>Which Test To Take?</b></h2>
<br>
<div class="col-md-4 col-md-offset-1">
<h6><b>Input Test 1 Score</b></h6>
<input type="number" id="test1score">
</div>
<div class="col-md-4 col-md-offset-1">
<h6><b>Input Test 2 Score</b></h6>
<input type="number" id="test2score">
</div>
<p id="testscore"></p>
</div>
</div>
</section>

First off, you need to wrap your if statements with outer parenthesis
if ((act == 9) && (sat >= 120) && (sat <= 140)) {...}
Then you have a couple of undeclared variables causing an exception
var score, sat, act;
Note 1a: Whether these 3 variables should be declared/available globally I don't know.
Note 1b: As not knowing what they actually should be, I commented out that last if statement so the code will run in this demo sample.
Stack snippet
<section id="" class="">
<div class="container text-center">
<div class="col-md-6 col-md-offset-1">
<h2><b>Which Test To Take?</b></h2>
<div class="col-md-4 col-md-offset-1">
<h6><b>Input Test 1 Score</b></h6>
<input type="number" id="test1score">
</div>
<div class="col-md-4 col-md-offset-1">
<h6><b>Input Test 2 Score</b></h6>
<input type="number" id="test2score">
</div>
<p id="testscore"></p>
</div>
</div>
</section>
<script>
document.getElementById("test2score").onkeyup = function() {WhichTestFunction()};
var score, sat, act;
function WhichTestFunction() {
var t1 = document.getElementById('test1score').value;
var t2 = document.getElementById('test2score').value;
if ((t1 == 9) && (t2 < 120)) {
score = "Take Test 1";
}
else if ((t1 == 9) && (t2 > 140)) {
score = "Take Test 2";
}
/*
else if ((act == 9) && (sat >= 120) && (sat <= 140)) {
score = "Toss up. Take the test you like better based on format and content.";
}
*/
document.getElementById("testscore").innerHTML = score;
}
</script>