CODEWITHSUNDEEP
javascriptnode.jstypescriptdomjquery-selectors
Animor Romina
Animor Romina

Reputation: 13

querySelector returns null even though id exists

I am using node.js and typescript to build a website. In one part of the code I am trying to acces an Element with the ID 'likeForm'. This did not work.

This is the furthest I got:

in movies.ts:

import { JSDOM } from 'jsdom';
import * as fs from 'fs';

const html = fs.readFileSync('C:/Users/animo/OneDrive/Dokumente/svn/web anwendungen/src/server/views/movies.jade', 'utf-8');
const dom = new JSDOM(html);

const likeForm = <HTMLFormElement>dom.window.document.querySelector('#likeForm');

in movies.jade:

block append scripts
    +script('movie.js')

block append styles
    link(rel='stylesheet' href='/static/styles/views/movie.css')

block content
    h1 #{movie.title}
    section(class = 'displayAreaTrailer')
        p(class = 'paragraph')  #{movie.extract}
    div(class = 'columns')
        Section(class = 'displayAreaLeft')
            br 
            p(class = 'paragraph')  #{movie.extract}
            p(class = 'paragraph') Released: #{movie.release}
            p(class = 'paragraph') Schauspieler: #{movie.cast}
            p(class = 'paragraph') Genres: #{movie.genres}
            br
        Section(class = 'displayAreaRight')
            br
            form(id = 'likeForm' action = '#{movie.id}/like' method = 'get')
                input(type = 'submit' value = '♥')
            br

But I still getr an error: TypeError: Cannot read properties of null (reading 'addEventListener') when trying to add an Event Listener to likeForm.

Can someone enlighten me?

Upvotes: 0

Views: 90

Answers (1)

mochaaP
mochaaP

Reputation: 40

You have to parse the template into HTML first:

import { compileFile } from 'pug' // Jade have renamed to Pug.
import { JSDOM } from 'jsdom'

const fn = compileFile('path/to/file')
const html = fn(locals) // the values you would like to pass into the template

const dom = new JSDOM(html)

Upvotes: 0

Related Questions