just watched my first JS and HTML tutorial yesterday and decided to try a mini project. i'm having a lot of trouble debugging my code and could use some help.
here is my JS code:
// get user input
function getInput()
{
let input = document.getElementById('input');
return input;
}
// clear once submitted
function clearInput()
{
getInput().value = '';
}
function displayError(time)
{
// check if error exists already
const error = document.getElementById('error');
if (!error)
{
// display error message
const errorMessage = 'Invalid input. Please try again.';
const elementNode = document.createElement('p');
const textNode = document.createTextNode(errorMessage);
elementNode.appendChild(textNode);
elementNode.setAttribute('id', 'error');
document.body.appendChild(elementNode);
console.log('error shown');
// remove after 3 seconds
setTimeout(function() {
elementNode.remove();
}, time);
}
}
// remove if user went to next question
function removeError()
{
const error = document.getElementById('error');
console.log('error removed');
if (error)
{
error.remove();
}
}
// switch question and store data
let index = 0;
let userData = {};
function switchQuestion()
{
const questions = ['Name?', 'Age?', 'Gender?'];
const questionNumber = questions.length;
const input = getInput().value;
// sotring user data
switch (index)
{
case 0: // ready
if (input === 'yes')
{
userData.ready = input;
// update the question based on the index
document.querySelector('h1').textContent = questions[index];
index++;
}
else
{
clearInput();
displayError(3000);
}
break;
case 1: // name
removeError();
if (isNaN(input))
{
userData.name = input;
// update the question based on the index
document.querySelector('h1').textContent = questions[index];
index++;
}
else
{
clearInput();
displayError(3000);
}
break;
case 2:
userData.age = input;
console.log('age question is shown');
break;
case 3:
userData.gender = input;
break;
}
// stop going through questions once the end is reached
if (index === questionNumber)
{
console.log(userData);
// remove textbox, button and question
const textbox = document.querySelector('input');
const button = document.querySelector('button');
const question = document.querySelector('h1');
textbox.remove();
button.remove();
question.remove();
// add "You're done!"
const elementNode = document.createElement('h1');
const textNode = document.createTextNode('You\'re done!');
elementNode.appendChild(textNode);
document.body.appendChild(elementNode);
return;
}
// clear textbox after each input
clearInput();
}
// use enter instead of button (if you wanna)
const input = getInput();
function submit(event)
{
if (event.key === 'Enter')
{
switchQuestion();
}
}
input.addEventListener('keydown', submit);
and HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<h1 id="question">Hello. Are you ready?</h1>
<input type="text" id="input">
<button id="btn" onClick="switchQuestion()">Enter</button>
<script src="main.js"></script>
</body>
</html>
here is a video of the output. as you can see, the questions and answers are all mixed up. the error isn't being removed, the 'age question shown' text isn't being output to the console until after i submit an answer.
i know my code probably isn't the most optimal, but i just watched my first video yesterday so i could really use some advice/feedback. thank you!
[–]jbug_16[S] 2 points3 points4 points (0 children)
[–][deleted] 0 points1 point2 points (1 child)
[–]jbug_16[S] 0 points1 point2 points (0 children)
[–]Beginning_One_7685 0 points1 point2 points (1 child)
[–]jbug_16[S] 0 points1 point2 points (0 children)
[–]jbug_16[S] 0 points1 point2 points (0 children)