How to Convert Char to ASCII Using JavaScript With HTML?

Hello Friends Today, through this tutorial, I will tell you How to Character to ASCII Convert Using JavaScript Without Submit Button with HTML? You can create a simple HTML page with JavaScript to convert a character to its ASCII value 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>Char to ASCII Converter</title>
<style>
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;
}
</style>
</head>
<body>
<h2>Char to ASCII Converter</h2>
<label for="charInput">Enter a Character:</label>
<input type="text" id="charInput" placeholder="Enter a character" oninput="convertCharToASCII()">

<p id="asciiResult"></p>

<script>
function convertCharToASCII() {

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

// Check if the input is not empty
if (charInput.length > 0) {

// Get the ASCII value of the first character
const asciiValue = charInput.charCodeAt(0);

// Display the result
document.getElementById('asciiResult').innerHTML = `ASCII Value: ${asciiValue}`;
} else {

// If the input is empty, clear the result
document.getElementById('asciiResult').innerHTML = '';
}

}
</script>
</body>
</html>

This HTML file includes an input field for entering a character, and as you type in the character, the `convertCharToASCII` function is called using the `oninput` event. The function retrieves the ASCII value of the entered character and updates the result on the page. The result is displayed in a paragraph element with the id `asciiResult`.

Example:-

Char to ASCII Converter

Char to ASCII Converter