JS Udemy course exercise

Hello there. I’d like some help on a recent assignment on a Udemy course. Here are the instructions and what I need to do.

Udemy Event Exercise

And here is my code so far:

const h1 = document.querySelector('h1');
const h2 = document.querySelector('Welcome, ');

input.addEventListener('change', function (e) {
     h1.innerText = input.value;
})

The Udemy editor doesn't like where I put "Welcome, ". I have the basics. I appreciate the help.

What instruction tells you to do this?

1 Like

No one lol. That’s my attempt to add the "Welcome, ". I’ll be honest, at least 75% of why I don’t have a job in software yet is my ADD and inability to read instructions well enough.

Delete that line because there is nothing in the instructions about creating an h2 variable that I can see.

1 Like

Fair enough. I also think it just wants me to change the parameters of the H1 but I think I’m wrong on that too lol.

Currently, the code updates the h1 element’s text with the whatever is located in the input element when it changes.

You just need to concatenate the Welcome, with the input value. Basically, you will only change the right side of the = of the following line:

h1.innerText = input.value;

I am sure they have taught you how to concatenate strings with variables. If not Google it. This will accomplish the second task.

For the 3rd task, you will need to create some conditional logic to do what you accomplish in the 2nd task if input is not an empty string or put the original text of the H1 back if input is blank.

1 Like

Yes, I think for the 3rd task I need prevent.default. I think lol

What does the starting HTML file look like? Can you copy/paste the code?

Here is the starting HTML source code…


<head>
    <title>Input Event</title>
    <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <h1>Enter Your Username</h1>
    <input type="text" id="username">
</body>

</html>

No need for that method for this task.

Yes I’m over thinking it lol. Another “noob” trait I’m trying to get through.