0

I'm trying to update the DOM with my localStorage values, but I can't figure out what's wrong. I'm guessing the problem has to do with the page refreshing or variable scopes?

It's basically just a simple ticket form, which should open a filled ticket when submitted.

Ticket Form Here we enter our input

                <form action="" class="ticket-form">
                    <label for="subject">Subject</label>
                    <input type="text" id="subject" name="ticket-subject" required />

                    <label for="description">Description</label>
                    <input type="text" id="description" name="ticket-description" required>

                    <label for="priority">Priority</label>
                    <select id="priority" name="ticket-priority">
                        <option value="minor" selected>1 - Minor</option>
                        <option value="significant">2 - Significant</option>
                        <option value="critical">3 - Critical</option>
                    </select>

                    <a>
                        <form action="./ticket.html">
                            <input type="submit" value="Submit" id="ticket_submit">
                        </form>
                    </a>
                </form>

Event listener for submit button. Set input to localStorage

ticketForm.addEventListener('submit', (e)=> {

    const ticketSubject = document.getElementById('subject').value;
    const ticketDescription = document.getElementById('description').value;
    const prio = document.getElementById('priority')
    const priorityValue = prio.options[prio.selectedIndex].value

    e.preventDefault()

    localStorage.setItem('subject', JSON.stringify(ticketSubject));
    localStorage.setItem('description', JSON.stringify(ticketDescription));
    localStorage.setItem('priority', JSON.stringify(priorityValue));

    getTicketFormValues()
});

The HTML I need to update

<div class="container">
    <div class="canvas">
        <h1 class="ticket-subject">Lorem ipsum dolor</h1>
        <h2>Description</h2>
        <p class="ticket-description">Lorem ipsum dolor sit.</p>
        <h2>Urgency</h2>
        <p class="ticket-priority">Lorem, ipsum.</p>
    </div>
</div>

All is seemingly going well thus far, as the localStorage does have the correct key-value pairs. It is only when I try to manipulate the HTML with this information something goes wrong.

function getTicketFormValues() and DOM element variables

const ticketForm = document.querySelector('.ticket-form')
const subjectElTicket = document.querySelector('.ticket-subject')
const descriptionElTicket = document.querySelector('.ticket-description')
const priorityElTicket = document.querySelector('.ticket-priority')

function getTicketFormValues() {
    const subjectValue = localStorage.getItem('subject')
    const descriptionValue = localStorage.getItem('description')
    const urgencyValue = localStorage.getItem('priority')

    subjectElTicket.innerHTML = subjectValue;
    descriptionElTicket.innerHTML = descriptionValue;
    priorityElTicket.innerHTML = urgencyValue;

    location.href='ticket.html'
};
Lazarus
  • 3
  • 2
  • *something goes wrong* <-- So what goes wrong? What are you getting that you don't like? Is there an error? Also, If you are just storing values from `form` fields, you don't need to call `JSON.parse()` before storing the values in `localStorage`, because `form` fields are already strings. – Scott Marcus Jun 13 '22 at 19:00
  • And when is `getTicketFormValues()` being called? – Scott Marcus Jun 13 '22 at 19:01
  • Here's the console error message: "Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')" getTicketFormValues() is being called when the submit button is clicked on the form. And thanks for the tip, I'll make some changes – Lazarus Jun 13 '22 at 19:06
  • If getTicketFormValues will redirect visitors via location.href, you don't need to modify the HTML as they won't see it that long anyway. – imvain2 Jun 13 '22 at 19:10
  • @imvain2 Users fill the form on ticket_form.html, but the HTML I'm trying to manipulate is the ticket.html, which is the location.href. – Lazarus Jun 13 '22 at 19:15
  • If you want to read local storage and modify the page, the read has do be done by the same html document that you are trying to amend. There is no point reading values and then loading a new page (unless you sent the information as url arguments to the new page - which would be pointless as you can read the local storage once the new page has loaded). – Dave Pritlove Jun 13 '22 at 19:41

0 Answers0