Develop Reference

Two arguments from one input. JavaScript

Im doing JS exercises. The task is:
Write a JavaScript program to check whether two given integer values are in the range 50..99 (inclusive). Return true if either of them are in the said range.
Task is easy, I took two numbers from two inputs.
Is there possibility to take two numbers from only one input?
and start function like this:
function task28(fnum, snum){}
Below is mine solution with two inputs.
<input type="text" id="task28a" class="form-control" placeholder="write number" aria-label=""
aria-describedby="basic-addon2">
<input type="text" id="task28b" class="form-control" placeholder="write number" aria-label=""
aria-describedby="basic-addon2">
</br>
<button type="button" class="btn btn-dark btn-sm" onclick="task28()">Check</button>
<p class="answer" id="task28ans"></p>
<script>
function task28() {
let fnum = document.getElementById("task28a").value;
let snum = document.getElementById("task28b").value;
if (
(fnum >= 50 && fnum <= 99) && (snum >= 50 && snum <= 99)
) {
document.getElementById("task28ans").innerHTML = "true";
} else {
document.getElementById("task28ans").innerHTML = "false";
}
}
</script>

I'd suggest you to use a form and run a function on submit.
This can also simplify retrieve your values
function DoSubmit(){
var a = document.myform.myinput.value;
var b = document.myform.message.value;
console.log(a,b)
}
<form name="myform" onsubmit="DoSubmit();">
<input type="text" name="myinput" value="" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>

Check below code....
function task28() {
let tempVar = document.getElementById("task28a").value;
let splitArray = tempVar.split(" ");
if(splitArray.length == 2)
{
let fnum = parseInt(splitArray[0]);
let snum = parseInt(splitArray[1]);
if ((fnum >= 50 && fnum <= 99) && (snum >= 50 && snum <= 99)) {
document.getElementById("task28ans").innerHTML = "true";
} else {
document.getElementById("task28ans").innerHTML = "false";
}
}
}
<input type="text" id="task28a" class="form-control" placeholder="Enter number" aria-label="" aria-describedby="basic-addon2">
</br>
<button type="button" class="btn btn-dark btn-sm" onclick="task28()">Check</button>
<p class="answer" id="task28ans"></p>

Why does form not reset (all fields and div of result) after click clear?

I want display div id="showResult" after click calculate button and clear all input and div id="showResult" after click clear button in a form. But clear button doesn't work after I click the button.
What's the problem? How can I solve this problem?
window.onload = function BMR() {
var gender = document.getElementById('gender');
var weight = document.getElementById('weight');
var height = document.getElementById('height');
var age = document.getElementById('age');
var calculate = document.getElementById('calculate');
calculate.addEventListener('click', toBmr);
function toBmr() {
var select = null;
if (gender.value && weight.value && height.value && age.value) {
if (document.getElementById('gender').checked) {
select = document.getElementById('gender').value;
}
if (select == 'male') {
var result = (10 * weight.value) + (6.25 * height.value) - (5 * age.value) + 5;
document.getElementById('result').innerHTML = Number(result).toFixed(2);
} else {
var result = (10 * weight.value) + (6.25 * height.value) - (5 * age.value) - 161;
document.getElementById('result').innerHTML = Number(result).toFixed(2);
}
document.getElementById('showResult').style.display = "block";
} else {
result = " ";
}
};
};
function clearForm() {
document.getElementById("do-form").reset();
}
<form name="do-form" id="do-form">
<p>BMR Calculator</p>
<p>Gender:
<input type="radio" id="gender" name="gender" value="male" checked="checked">Male
<input type="radio" id="gender" name="gender" value="female">Female
</p>
<p>Weight: <input type="number" name="weight" id="weight" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;"> kg</p>
<p>Height: <input type="number" name="height" id="height" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;"> cm</p>
<p>Age: <input type="number" name="age" id="age" size="10" maxlength="3" onkeypress="if(this.value.length > 2) return false;"></p>
<button type="button" id="calculate">Calculate</button>
<button type="button" id="clear" onclick="clearForm()">Clear</button><br><br>
<div class="row-result-tab" id="showResult" style="display:none;">
<label>BMR = <span id="result"></span> calories/day</label>
</div>
</form>

You needed to hide the div in the clearForm
Here is your code cleaned up based on the DRY principle (don't repeat yourself)
We could get rid of some testing if we could trust the browser to respect the type="number" which is fairly well supported
window.addEventListener("load", () => {
document.getElementById('calculate').addEventListener('click', toBmr);
});
const toBmr = () => {
const gender = document.querySelector('[name=gender]:checked').value;
// the "number" fields will not allow other data than numbers
let weight = +document.getElementById('weight').value;
let height = +document.getElementById('height').value;
let age = +document.getElementById('age').value;
if (weight && age && height) {
let result = (10 * weight) + (6.25 * height) - (5 * age)
result += gender === 'male' ? 5 : -161; // add 5 for male, subtract 161 if female
document.getElementById('result').innerHTML = result.toFixed(2);
document.getElementById('showResult').style.display = "block";
}
};
const clearForm = () => {
document.getElementById("do-form").reset();
document.getElementById('showResult').style.display = "none";
}
<form name="do-form" id="do-form">
<p>BMR Calculator</p>
<p>Gender:
<input type="radio" name="gender" value="male" checked="checked">Male
<input type="radio" name="gender" value="female">Female
</p>
<p>Weight: <input type="number" name="weight" id="weight" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;"> kg</p>
<p>Height: <input type="number" name="height" id="height" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;"> cm</p>
<p>Age: <input type="number" name="age" id="age" size="10" maxlength="3" onkeypress="if(this.value.length > 2) return false;"></p>
<button type="button" id="calculate">Calculate</button>
<button type="button" id="clear" onclick="clearForm()">Clear</button><br><br>
<div class="row-result-tab" id="showResult" style="display:none;">
<label>BMR = <span id="result"></span> calories/day</label>
</div>
</form>

The result div can not auto hide, you need add code to hide it
document.getElementById('showResult').style.visibility = "hidden";
or
document.getElementById('showResult').style.display= "none";
window.onload = function BMR() {
var gender = document.getElementById('gender');
var weight = document.getElementById('weight');
var height = document.getElementById('height');
var age = document.getElementById('age');
var calculate = document.getElementById('calculate');
calculate.addEventListener('click', toBmr);
function toBmr() {
var select = null;
if (gender.value && weight.value && height.value && age.value) {
if (document.getElementById('gender').checked) {
select = document.getElementById('gender').value;
}
if (select == 'male') {
var result = (10 * weight.value) + (6.25 * height.value) - (5 * age.value) + 5;
document.getElementById('result').innerHTML = Number(result).toFixed(2);
} else {
var result = (10 * weight.value) + (6.25 * height.value) - (5 * age.value) - 161;
document.getElementById('result').innerHTML = Number(result).toFixed(2);
}
document.getElementById('showResult').style.display = "block";
} else {
result = " ";
}
};
};
function clearForm() {
document.getElementById("do-form").reset();
//document.getElementById('showResult').style.visibility = "hidden";
document.getElementById('showResult').style.display = "none";
}
<form name="do-form" id="do-form">
<p>BMR Calculator</p>
<p>Gender:
<input type="radio" id="gender" name="gender" value="male" checked="checked">Male
<input type="radio" id="gender" name="gender" value="female">Female
</p>
<p>Weight: <input type="number" name="weight" id="weight" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;"> kg</p>
<p>Height: <input type="number" name="height" id="height" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;"> cm</p>
<p>Age: <input type="number" name="age" id="age" size="10" maxlength="3" onkeypress="if(this.value.length > 2) return false;"></p>
<button type="button" id="calculate">Calculate</button>
<button type="button" id="clear" onclick="clearForm()">Clear</button><br><br>
<div class="row-result-tab" id="showResult" style="display:none;">
<label>BMR = <span id="result"></span> calories/day</label>
</div>
</form>

I took some time to improve your code. As given in other answers already. You need to set the display of your result html back to none.
window.onload = function BMR() {
// Init
var gender = document.getElementById('gender');
var weight = document.getElementById('weight');
var height = document.getElementById('height');
var age = document.getElementById('age');
var calculate = document.getElementById('calculate');
// Click handler
calculate.addEventListener('click', toBmr);
function toBmr() {
// Init
// Very good practice to first declare your vars
// However include result as well here
// Remove select because it's not doing anything
var result = "";
var penalty = 0;
if (gender.value && weight.value && height.value && age.value && gender.checked) {
// When you have duplicate code, check the difference!
// Only the penalty given at the end is different!
if (gender.value == 'male') {
penalty = 5;
} else {
penalty = -161;
}
// Now we calculate with one formula
result = (10 * weight.value) + (6.25 * height.value) - (5 * age.value) + penalty;
// Add to html
document.getElementById('result').innerHTML = Number(result).toFixed(2);
document.getElementById('showResult').style.display = "block";
}
};
};
function clearForm() {
// This resets the form fields
document.getElementById("do-form").reset();
// This remove result again
document.getElementById('showResult').style.display = "none";
}
<form name="do-form" id="do-form">
<p>BMR Calculator</p>
<p>Gender:
<input type="radio" id="gender" name="gender" value="male" checked="checked">Male
<input type="radio" id="gender" name="gender" value="female">Female
</p>
<p>Weight: <input type="number" name="weight" id="weight" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;"> kg</p>
<p>Height: <input type="number" name="height" id="height" size="10" maxlength="6" onkeypress="if(this.value.length > 5) return false;"> cm</p>
<p>Age: <input type="number" name="age" id="age" size="10" maxlength="3" onkeypress="if(this.value.length > 2) return false;"></p>
<button type="button" id="calculate">Calculate</button>
<button type="button" id="clear" onclick="clearForm()">Clear</button><br><br>
<div class="row-result-tab" id="showResult" style="display:none;">
<label>BMR = <span id="result"></span> calories/day</label>
</div>
</form>

HTML JavaScript random number select

I have been trying to get a random number generator for the numbers to be between the two inputs. I have a code
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
x.innerHTML = Math.floor((Math.random() * 'low') + 'high');
}
</script>
As you would have noticed, I have the javascript in the one code.
where I put in 'low' and 'high' works with a fixed number

You need to get the value of the inputs and apply them to the calculations. - note that i am using parseInt() to convert the input values to numbers. Also - using 1 will as the low value will always yield are result of 10 since your getting the math.floor - which will equate to 0 - so 0 + 10 = 10.
Based on #Quentins comment - i alered the caluclation to suit your numbers.
function myFunction() {
var x = document.getElementById("randnum");
var high = parseInt(document.getElementById("high").value);
var low = parseInt(document.getElementById("low").value);
x.innerHTML = Math.floor(Math.random()*(high-low+1)+low)
}
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>

<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
myFunction = () => {
let min = parseInt(low.value, 0);
let max = parseInt(high.value, 0);
let x = document.getElementById("randnum")
x.innerHTML = Math.floor(Math.random() * (max - min)) + min;
}
</script>

I think this will help.
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
var low = document.getElementById("low").value;
var high = document.getElementById("high").value;
x.innerHTML = Math.floor((Math.random() * low) + high);
}
</script>

var max = parseInt($("#high")[0].value);
var min = parseInt($("#low")[0].value);
x.innerHTML = Math.floor(Math.random() * max) + min;

First, in (Math.random() * 'low') + 'high', low and high are not really the integer values.
Second, a very IMPORTANT issue others did not mention is that Math.random() returns a double value between 0 and 1. If you follow some of the other answers, the random number will always be 0.
use this:
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number"
value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number"
value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
var low = document.getElementById("low").value;
var high = document.getElementById("high").value;
var random = Math.random();
x.innerHTML = Math.floor(random * (high-low) + high);
}
</script>

Counter char script for many fields

Hi I want use this script to count char in form with many fields,
but not want duplicate code, I want use only one code for all fields,
how can pass to javascript name fields count and display this count...
As one counter for many fields input type...
thanks
Salvatore
<script>
function countChar(val) {
var len = val.value.length;
if (len >= 66) {
val.value = val.value.substring(0, 66);
} else {
$('#charNum').text(65 - len);
}
};
</script>
<div id="charNum"></div>
<input type="text" name="name_var1" value="" maxlength="66" onkeyup="countChar(this)" />
<div id="charNum"></div>
<input type="text" name="name_var2" value="" maxlength="66" onkeyup="countChar(this)" />
<div id="charNum"></div>
<input type="text" name="name_var3" value="" maxlength="66" onkeyup="countChar(this)" />

the problem is that you are using ids several times. Try to work with classes and generate the selectors from the class name of the element.
<script>
function countChar(val) {
var len = val.value.length;
if (len >= 66) {
val.value = val.value.substring(0, 66);
} else {
$('.' + val.className + '_charNum').text(65 - len);
}
};
</script>
<div class="name_var1_charNum"></div>
<input class="name_var1" type="text" name="name_var1" value="" maxlength="66" onkeyup="countChar(this)" />
<div class="name_var2_charNum"></div>
<input class="name_var2" type="text" name="name_var2" value="" maxlength="66" onkeyup="countChar(this)" />
<div class="name_var3_charNum"></div>
<input class="name_var3" type="text" name="name_var3" value="" maxlength="66" onkeyup="countChar(this)" />

As far as I understood you do need to display characters left value for each field (depending on max-length) and restrict user from adding extra characters (more than allowed limit). Probably that's what you need.
<div class="countable-item">
<div class="char-num"></div>
<input type="text" name="any" class="countable" max-length="66" />
</div>
<div class="countable-item">
<div class="char-num"></div>
<input type="text" name="any2" class="countable" max-length="66" />
</div>
<script>
(function($){
var restrictMaxLength = function () {
var maxLength = $(this).attr('max-length'),
currentValue = $(this).val(),
currentLength = currentValue.length;
if (currentLength >= maxLength) {
return false;
}
},
displayCountCharacters = function () {
var maxLength = $(this).attr('max-length'),
currentValue = $(this).val(),
currentLength = currentValue.length;
$(this).closest('.countable-item')
.find('.char-num')
.text(maxLength - currentLength);
};
$(document)
.on('keypress', '.countable', restrictMaxLength)
.on('keyup', '.countable', displayCountCharacters);
})(jQuery);
</script>

Does this method work for solving the quadratic equation using JavaScript?

I'm trying to do some "complex" math where I need to call upon some of JavaScript's Math properties to solve the quadratic equation. Does the following method work?
root = Math.pow(inputb,2) - 4 * inputa * inputc;
root1 = (-inputb + Math.sqrt(root))/2*inputa;
root2 = (-inputb - Math.sqrt(root))/2*inputa;
Does this look correct?
For some reason, I'm not seeing correct results..
inputa, inputb, and inputc are all variables which store user-input from a text field by the way.
FULL CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quadratic Root Finder</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
window.onload = function() {
$('.error').hide();
document.getElementById('quadraticcalculate').onclick = function calculateQuad()
{
var inputa = document.getElementById('variablea').value;
var inputb = document.getElementById('variableb').value;
var inputc = document.getElementById('variablec').value;
inputa = new Number(inputa); // try to convert to number
if (isNaN(inputa)) { // use built in method to check for NaN
$('#quadraticaerror').show();
return;
}
inputb = new Number(inputb); // try to convert to number
if (isNaN(inputb)) { // use built in method to check for NaN
$('#quadraticberror').show();
return;
}
inputc = new Number(inputc); // try to convert to number
if (isNaN(inputc)) { // use built in method to check for NaN
$('#quadraticcerror').show();
return;
}
root = Math.pow(inputb,2) - 4 * inputa * inputc;
root1 = (-inputb + Math.sqrt(root))/(2*inputa);
root2 = (-inputb - Math.sqrt(root))/(2*inputa);
document.getElementById('root1').value = root1;
document.getElementById('root2').value = root2;
if(root<'0')
{
document.getElementById('root1').value = 'No real solution'
document.getElementById('root2').value = 'No real solution'
}
else {
if(root=='0')
{
document.getElementById('root1').value = root1
document.getElementById('root2').value = 'No Second Answer'
}
else {
document.getElementById('root1').value = root1
document.getElementById('root2').value = root1
}
}
};
document.getElementById('quadraticerase').onclick = function()
{
document.getElementById('quadraticform').reset();
$('.error').hide();
}
document.getElementById('cubicerase').onclick = function()
{
document.getElementById('cubicform').reset();
$('.error').hide();
}
}
</script>
<style>
div.#wrapper
{
text-align: center;
}
.error
{
color: #FF0000;
}</style>
</head>
<body>
<div id="wrapper">
<div id="quadratic">
<form id="quadraticform">
<h1>Quadratic</h1>
a:<input id="variablea" value="" type="text">
<br/>
b:<input id="variableb" value="" type="text">
<br />
c:<input id="variablec" value="" type="text">
<br />
<input id="quadraticcalculate" value="Calculate!" type="button">
<input id="quadraticerase" value="Clear" type="button">
<br />
<br />
Roots:
<br />
<input id="root1" type="text" readonly>
<br />
<input id="root2" type="text" readonly>
<p id="quadraticaerror" class="error">Error: Variable a is not a valid integer!</p>
<br />
<p id="quadraticberror" class="error">Error: Variable b is not a valid integer!</p>
<br />
<p id="quadraticcerror" class="error">Error: Variable c is not a valid integer!</p>
</form>
</div>
<div id="cubic">
<form id="cubicform">
<h1>Cubic</h1>
a:<input id="variablea" value="" type="text">
<br/>
b:<input id="variableb" value="" type="text">
<br />
c:<input id="variablec" value="" type="text">
<br />
d:<input id="variabled" value="" type="text">
<br />
<input id="cubiccalculate" value="Calculate!" type="button">
<input id="cubicerase" value="Clear" type="button">
<br />
<br />
Roots:
<br />
<input id="root1" type="text" readonly>
<br />
<input id="root2" type="text" readonly>
<p id="cubicaerror" class="error">Error: Variable a is not a valid integer!</p>
<br />
<p id="cubicberror" class="error">Error: Variable b is not a valid integer!</p>
<br />
<p id="cubiccerror" class="error">Error: Variable c is not a valid integer!</p>
<br />
<p id="cubicderror" class="error">Error: Variable d is not a valid integer!</p>
</form>
</div>
</div>
</body>
</html>

* and / have same precedence and are left associative so what you have effectively got is
root = Math.pow(inputb,2) - 4 * inputa * inputc;
root1 = ((-inputb + Math.sqrt(root))/2)*inputa;
root2 = ((-inputb - Math.sqrt(root))/2)*inputa;
what you want is
root = Math.pow(inputb,2) - 4 * inputa * inputc;
root1 = (-inputb + Math.sqrt(root))/(2*inputa);
root2 = (-inputb - Math.sqrt(root))/(2*inputa);