How to Convert Octal to Decimal Using JavaScript With HTML, CSS?

Hello Friends Today, through this tutorial, I will tell you How to octal to decimal Convert Using JavaScript Without Submit Button with HTML? You can create a simple HTML page that converts an octal number to decimal using JavaScript without requiring a submit button. Here’s an example:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Octal to Decimal Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}
p {
margin-top: 0;
}
</style>
</head>
<body>
<h2>Octal to Decimal Converter</h2>
<label for="octalInput">Enter Octal Number:</label>
<input type="text" id="octalInput" placeholder="Enter octal number" oninput="convertOctalToDecimal()">
<p id="result"></p>

<script>
function convertOctalToDecimal() {

// Get the octal input value
const octalInput = document.getElementById('octalInput').value;

// Validate if the input is a valid octal number
if (!/^[0-7]+$/.test(octalInput)) {
document.getElementById('result').innerHTML = 'Invalid Octal Number';
return;
}

// Convert octal to decimal
const decimalResult = parseInt(octalInput, 8);

// Display the result
document.getElementById('result').innerHTML = `Decimal Equivalent: ${decimalResult}`;
}
</script>
</body>
</html>

In this example, the `oninput` attribute is used in the input field, which means the `convertOctalToDecimal` function will be called every time the user inputs a value. The JavaScript function then validates if the input is a valid octal number using a regular expression (`/^[0-7]+$/`) and converts it to a decimal number using `parseInt` with base 8. The result is then displayed below the input field.