How to Convert Decimal to IP Using JavaScript With HTML With Example?

Hello Friends Today, through this tutorial, I will tell you How to Decimal to IP Convert Using JavaScript Without Submit Button with HTML? You can create a simple Decimal to IP Converter using JavaScript and HTML without a submit button. The conversion can happen dynamically as the user types in the decimal value. 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>Decimal to IP 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;
}
</style>
</head>
<body>
<h2>Decimal to IP Converter</h2>
<label for="decimalInput">Enter Decimal Value:</label>
<input type="number" id="decimalInput" placeholder="Enter decimal value" oninput="convertToIP(this.value)">
<p id="ipResult"></p>
<script>
function convertToIP(decimalValue) {
// Validate input
if (isNaN(decimalValue) || decimalValue < 0 || decimalValue > 4294967295) {
document.getElementById('ipResult').innerHTML = 'Invalid decimal value';
return;
}
// Convert decimal to IP
const ipArray = [];
for (let i = 3; i >= 0; i--) {
const shift = i * 8;
const octet = (decimalValue >> shift) & 255;
ipArray.push(octet);
}
// Display the result
const ipAddress = ipArray.join('.');
document.getElementById('ipResult').innerHTML = `IP Address: ${ipAddress}`;
}
</script>
</body>
</html>

This HTML file includes an input field for entering the decimal value, and the `convertToIP` function is called on the `oninput` event of the input field. The function checks if the entered value is a valid decimal and converts it to an IP address dynamically. The result is then displayed below the input field.

Example:-

Decimal to IP Converter

Decimal to IP Converter