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

You can create a simple HTML page with JavaScript that converts octal to hexadecimal without using a submit button. The conversion can happen dynamically as the user inputs the octal value. Here’s an example:


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

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

// Check if the input is a valid octal number
if (!/^[0-7]+$/.test(octalInput)) {
document.getElementById('hexResult').innerHTML = 'Invalid octal number';

// Convert octal to decimal, then decimal to hexadecimal
const decimalValue = parseInt(octalInput, 8);
const hexValue = decimalValue.toString(16).toUpperCase();

// Display the result
document.getElementById('hexResult').innerHTML = `Hexadecimal: 0x${hexValue}`;

This HTML file includes an input field for entering an octal number, and as the user types, the `convertOctalToHex` function is triggered on the `oninput` event. The function validates if the input is a valid octal number and then converts it to hexadecimal, displaying the result dynamically on the page.