Submitted 7 months ago

Newsletter Signup

#accessibility

Ally Glenday• 20

@ally-glenday

Preview site View code

This is a solution for...

Newsletter sign-up form with success message

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

First submission using HTML, CSS & JavaScript - so any help / feedback would be amazing!

I wanted to have the user's input (email address) displayed back to them on the sucess page, but I can't seem to be able to show it using the DOM. I saved it as a variable and I can console.log it / alert their email on the success page, so I know this can be done. However, when I try to convert this into an HTML element, e.g. <span> or <p> to be shown on the page instead of '[email protected]', it doesn't seem to work.

If anyone has any ideas why this is, I'd hugely appreciate it!

Thanks :)

Community feedback

Azzy dvyastia kesuma• 1,115

@azzykesuma

Posted 7 months ago

congratulations on completing the challenge! you can use localstorage to set the email for the purpose of this challenge https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage then, get the localstorage value, and inject it into DOM

but in the real job scenario, i think you need to store it in some sort of database

Marked as helpful

Ally Glenday• 20

@ally-glenday

Posted 7 months ago

@azzykesuma

Hey Azzy, thanks so much for your comment! I actually tried using the local storage method, but for some reason I still can't get it to show the HTML! :(

I can console.log the user's email with local storage, but when I try to add this to the DOM, it won't load and says the function is 'null' :/

Wasiu Mustapha• 40

@Datom969

Posted 7 months ago

To make the email input value show on the submit page, create an empty <span></span> where the email value should be in your html, give it an id( say mymail). In JavaScript, get the id. Then, to display it use DOM manipulation: mymail.innerHTML = " " + input.value +". " Then, for the dismiss button don't forget to set input.value to empty, so it doesn't show in the input field again. Check my js code for clarity.

Ally Glenday• 20

@ally-glenday

Posted 7 months ago

@Datom969

Hey Wasiu, thanks so much for your comment! I've tried what you've suggested a lot of different times now, but for some reason I can't get it to work :( Would you be able to see what the problem is at all?

https://github.com/ally-glenday/fm-newsletter-sign-up

I've been struggling with this for so long now! Thanks so much :)

Wasiu Mustapha• 40

@Datom969

Posted 7 months ago

I couldn't see your complete js code but check this in your code:

Did you get the form input id/class using the document.get or querySelector method? Otherwise, input.value won't work in step 2👇
Did you target the form submit event listener and make sure you specify what happens when the button is clicked? This is where you manipulate the DOM.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord