how could i make the submit ,average and reset button all disable until i enter a number between -9999 to 9999
in a html code like this
---------------------------
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="1.css">
<script src="1.js"></script>
<title>Temperature Converter </title>
</head>
<body>
<h1 id="title"> Temperature Converter </h1>
<p> Convert from Fahrenheit to Celsius</p>
<div class="sidebyside">
<label>Fahrenheit</label>
<p> Enter Fahrenheit temperature </p>
<input id="fInputValue" onkeypress="return validate(event)" maxlength="10">
<button type="button" onclick="convertToC()">Submit</button>
<br>
<label>result Celsius: </label>
<p id="resultCValue"> </p>
</div>
</br>
<div class="sidebyside" style="margin-top: 0px;border: none;">
<label>Result of the input </label>
</br>
<label>Fahrenheit</label>
<label>Celsius</label>
</br>
</br>
<textarea id="dataHistory" "input type="text" value="dont input" readonly="readonly" name="dataHistory" rows="30" cols="35" style="margin-top: 10px;text-align: left;padding-top: 20px;padding-right: 0px;font-size: 18px;">
</textarea>
<span id="dataHistory"></span></br>
<span id="resultLine"></span></br>
<span id="totalAverage"></span>
</div>
</br>
<button type="button" onclick="clearHistory()" style="float: right:200;width: 90px;height: 35px;font-size: 17px;font-weight: bold;cursor: pointer;">Reset</button>
<button type="button" onclick="calcAverage()" style="float: right:290;width: 90px;height: 35px;font-size: 17px;font-weight: bold;cursor: pointer;">Average</button>
<div>
</div>
</body>
</html>
------
1.js
var arr1 = [];
function validate(evt) {
var theEvent = evt || window.event;
if (theEvent.type === 'paste')
{
key = event.clipboardData.getData('text/plain');
}
else {
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
console.log(evt.target.value);
}
var regex = /^[+-]?[0-9.]{1,9}(?:\.[0-9]{1,2})?$/
if(theEvent.keyCode==45 && evt.target.value=="")
{return true;}
else{
if( !regex.test(key) )
{
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
}
function convertToC() {
let fValue = document.getElementById("fInputValue").value;
if(-9999<=fValue && fValue<=9999)
{
let cTemp = ((fValue - 32) / 1.8).toFixed(2);
document.getElementById("resultCValue").innerHTML = `= ${cTemp} C`;
document.getElementById("resultCValue").style.color='white';
loadArrayData(cTemp, fValue);
}
else{
document.getElementById("resultCValue").innerHTML = "Value should be between -9999 to 9999";
document.getElementById("resultCValue").style.color='red';
}
}
function loadArrayData(data, anotherData)
{
var oldValue = document.getElementById("dataHistory").innerHTML;
if((data != '' || data != null) && (anotherData != '' || anotherData != null))
{
arr1.push({
Celsius:data,
Fahrenheit:anotherData
});
}
for(i=0;i<arr1.length;i++)
{
document.getElementById("dataHistory").innerHTML = oldValue+"<br>"+arr1[i].Fahrenheit+ " " +arr1[i].Celsius+"\t";
}
document.getElementById("resultLine").innerHTML = "\t=============\n"
}
function calcAverage() {
const avgCel = (arr1.reduce((t,b) => {
return t + +b.Celsius
}, 0) / arr1.length).toFixed(2);
const avgFahr = (arr1.reduce((t,b) => {
return t + +b.Fahrenheit
}, 0) / arr1.length).toFixed(2);
var oldValue = document.getElementById("totalAverage").innerHTML;
document.getElementById("totalAverage").innerHTML = avgFahr+" "+avgCel ;
}
function clearHistory()
{
arr1 = [];
document.getElementById("resultData").innerHTML = '';
document.getElementById("fInputValue").value = '';
document.getElementById("resultCValue").innerHTML = '';
}
-------------------
how could i make the submit ,average and reset button all disable until i enter a number between -9999 to 9999 ?
Step by step
Solved in 4 steps with 4 images
