I'm currently working on a simple website that requires the user to input a minimum of 256 characters, choose between ASCII or EBCDIC for conversion, and then click the submit button (Run) to display the final converted result on the page. However, I'm facing difficulties in implementing the functionality that converts the entered text to ASCII or EBCDIC values based on the selected radio button. Below is the code snippet:
1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Converter for ASCII or EBCDIC</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="encoding.js" defer></script>
</head>
<body style="text-align:center;">
<label for="text">Enter a text that is at least 256 characters long</label><br>
<input type="text" id="text_id" name="text" minlength="256">
<p>Select the following:</p>
<div>
<input id="ascii" type="radio" name="encoding" value="ascii">
<label for="ascii">ASCII</label>
</div>
<div>
<input id="ebcdic" type="radio" name="encoding" value="ebcdic">
<label for="ebcdic">EBCDIC</label>
</div>
<button onclick="myFunction()" type="button">"Run!"</button>
<label for="button">"Run!"</label>
<p id="demo" style="color:red;">
</body>
</html>
style.css:
body
{
font: 12pt Arial;
}
input[type=radio] + label::before
{
border-radius: 10px;
}
input {
border: 2px solid currentcolor;
}
input:invalid {
border: 2px dashed red;
}
input:invalid:focus {
background-image: linear-gradient(pink, lightgreen);
}
encod
encoding.js:
function myFunction()
{
let str = document.getElementById("text_id");
let a = "ASCII Code is == > ";
// Check if the user has selected a radio button
let radio_selected = false;
document.querySelectorAll('input[type="radio"]').forEach(function(radio)
{
if (radio.checked)
{
radio_selected = true;
}
})
if (!radio_selected)
{
console.log("The radio has not been checked, please select a button");
return;
}
if (str.value.length >= 256)
{
// Loop through the entire string entered by the user and print all converted values
for (let i = 0; i < str.length; i++)
{
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + a + str.value.charCodeAt(i);
}
}
else if (str.value.length < 256)
{
console.log("null");
return null;
// Print and return null if the user entered a string less than 256 characters
}
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + a + str.value.charCodeAt(i);
}
The input validation requirement (at least 256 characters) and radio button selection check have been implemented. However, I am still struggling with converting the entered text based on the chosen radio button and displaying all characters in ASCII or EBCDIC format.