Skip to content
Submitted over 1 year ago

Newsletter Signup

accessibility
Ally Glenday•20
@ally-glenday
A solution to the Newsletter sign-up form with success message challenge
Preview (opens in new tab)Code (opens in new tab)

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 'ash@loremcompany.com', it doesn't seem to work.

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

Thanks :)

Code

Please log in to post a comment

Log in

Community feedback

  • Azzy dvyastia kesuma•1,425
    @azzykesuma

    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
  • Wasiu Mustapha•40
    @Datom969

    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.

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