I am trying to generate a reordered sequence based on user inputs first name, last name, date of birth, and pin code. The sequence is combined, padded, and reordered using a specific mapping logic. Why am I getting this error:
Uncaught TypeError: Cannot read properties of null (reading ‘value’)
at generateKey (Key.html:86:57) at
HTMLButtonElement.onclick(Key.html:74:55)
<body>
<div class="container">
<h1>Key Generator</h1>
<form id="KeyForm">
<label for="firstName">First Name (Max 4 characters):</label>
<input type="text" id="firstName" name="firstName" maxlength="20" required>
<label for="lastName">Last Name (Max 20 characters):</label>
<input type="text" id="lastName" name="lastName" maxlength="20" required>
<label for="dob">Date of Birth (MMDDYYYY):</label>
<input type="text" id="dob" name="dob" maxlength="8" required>
<label for="zipCode">Zip Code (5 characters):</label>
<input type="text" id="zipCode" name="zipCode" maxlength="5" required>
<button type="button" onclick="generateKey()"> Key</button>
</form>
<div id="result" class="output" style="display: none;">
<strong>Generated Key:</strong>
<p id="outputSequence"></p>
</div>
</div>
<script>
function generateKey() {
// Get inputs
const firstName = document.getElementById('firstName').value.padEnd(4, '*').slice(0, 4);
const lastName = document.getElementById('lastName').value.padEnd(20, '*').slice(0, 20);
const dob = document.getElementById('dob').value.padEnd(8, '*').slice(0, 8);
const zipCode = document.getElementById('zipCode').value.padEnd(5, '*').slice(0, 5);
// Combine into one sequence
const combinedSequence = firstName + lastName + dob + zipCode;
// Reorder based on mapping
const reorderMap = [
12
];
let reorderedSequence = '';
for (const idx of reorderMap) {
reorderedSequence += combinedSequence[idx - 1];
}
// Display the result
document.getElementById('outputSequence').textContent = reorderedSequence;
document.getElementById('result').style.display = 'block';
}
</script>
</body>
New contributor
Ai-Dine is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
4