Hello Friends Today, through this tutorial, I will tell you How to create a simple HTML file with JavaScript to convert text to binary without using a submit button? You can create a simple HTML file with JavaScript to convert text to binary without using 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>Text to Binary 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>Text to Binary Converter</h2>
<label for="textInput">Enter Text:</label>
<input type="text" id="textInput" placeholder="Enter text" oninput="convertToBinary()">
<p id="binaryOutput"></p>
<script>
function convertToBinary() {
// Get the text input value
const textInput = document.getElementById('textInput').value;
// Convert each character to binary
const binaryArray = Array.from(textInput).map(char => char.charCodeAt(0).toString(2));
// Join binary values and display the result
document.getElementById('binaryOutput').textContent = `Binary: ${binaryArray.join(' ')}`;
}
</script>
</body>
</html>
In this example, the `convertToBinary` function is triggered whenever the user types into the text input (`oninput` event). The function converts each character in the input text to its binary representation using `char.charCodeAt(0).toString(2)`. The binary values are then joined and displayed in the `binaryOutput` paragraph.
Feel free to copy and paste this code into an HTML file and open it in a web browser to see the Text to Binary Converter in action.
With Submit Button Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to Binary 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;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
p {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Text to Binary Converter</h2>
<label for="text">Enter Text:</label>
<input type="text" id="text" placeholder="Enter text">
<button onclick="convertToBinary()">Convert to Binary</button>
<p id="binaryResult"></p>
<script>
function convertToBinary() {
// Get the input text value
const inputText = document.getElementById('text').value;
// Convert each character to binary
const binaryArray = inputText.split('').map(char => {
const binaryChar = char.charCodeAt(0).toString(2);
// Ensure each binary representation has 8 bits (pad with zeros if needed)
return '0'.repeat(8 - binaryChar.length) + binaryChar;
});
// Join the binary values and display the result
const binaryResult = binaryArray.join(' ');
document.getElementById('binaryResult').innerHTML = `Binary: ${binaryResult}`;
}
</script>
</body>
</html>