DOM manipulation in Object Oreinted Programming

Hi everyone, I’m working on learning more about object oriented programming by taking an existing Todoapp and converting the code into object oriented style programming. I was wondering if document.querySelector can be a value of an object property in a constructor function? On lines 2-5 of my Code Pen is the reason the object property with the querySelector values undefined because of the binding of the this keyword? Do I have to store the query Selectors in variables instead? Here is my Code Pen link https://codepen.io/paolo3098/pen/xxdPWmJ

Nope, the problem is that none of the classes in your HTML match up with your query strings.

For example, you have <input type="text" class="todoInput" /> in the HTML but you’re querying for .toDoInput, they don’t match.

Thanks for your response. I was testing out some javaScript code in code pen and my code editor. (VS Code) It’s just code that adds a background color to the page. I was trying to convert the existing javaScript code into Object Oriented style programming code. I’m not able to see a change in the color of the body on the webpage. Just wondering what I’m doing wrong here? There were also some minified CSS and jQuery files that were in the HTML. I didn’t know what they were so I deleted them, would that have anything to do with it or is there just something wrong with how my code is written? Code pen link is here https://codepen.io/paolo3098/pen/XWgrpLy

If you want something to happen when the button is clicked, you’ll need to bind a click event listener to it.

No I just wanted to see if I edit the body of the page in javaScript if it would turn blue on line 8.

You’ve certainly defined a method that changes the body’s background color to blue. But that method is never called. You need to either explicitly call it in your script a la a.addColor(), or you need to bind a click listener to the button with something like () => a.addColor().

1 Like

Ok that worked for me, so I just forgot to call the method like you would normally do with a regular function. Thanks for your prompt responses.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.