Hello Friends Today, through this tutorial, I will tell you How to Binary to IP Convert Using JavaScript Without Submit Button with HTML? You can create a simple Binary to IP converter using JavaScript and HTML without a submit button. The conversion can be triggered dynamically as the user inputs binary digits. 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>Binary 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>Binary to IP Converter</h2>
<label for="binaryInput">Enter Binary:</label>
<input type="text" id="binaryInput" placeholder="Enter binary digits" oninput="convertBinaryToIP(this.value)">
<p id="ipResult"></p>
<script>
function convertBinaryToIP(binaryInput) {
// Remove non-binary characters
const binaryDigits = binaryInput.replace(/[^01]/g, '');
// Ensure the binary string is 32 bits (IPv4)
const paddedBinary = binaryDigits.padStart(32, '0');
// Convert binary to IP address
const ipPart1 = parseInt(paddedBinary.slice(0, 8), 2);
const ipPart2 = parseInt(paddedBinary.slice(8, 16), 2);
const ipPart3 = parseInt(paddedBinary.slice(16, 24), 2);
const ipPart4 = parseInt(paddedBinary.slice(24, 32), 2);
const ipAddress = `${ipPart1}.${ipPart2}.${ipPart3}.${ipPart4}`;
// Display the result
document.getElementById('ipResult').innerText = `IP Address: ${ipAddress}`;
}
</script>
</body>
</html>
In this example, the conversion is triggered as the user types into the input field (`oninput`). The JavaScript function `convertBinaryToIP` takes the input value, removes non-binary characters, ensures it is 32 bits long, converts each octet to decimal, and displays the resulting IP address. The result is updated dynamically as the user types.