Question 137084 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I control DOM elements with FreshJs

I am trying to learn the new Deno framework, FreshJS. The only thing troubling me right now is
DOM control. If I wanted to dynamically update a menu item or change the color of a container how would I do so?

Essentially…how can I getElementByID() with FreshJS? I haven’t found any documentation on how to do this.

I have tried the vanillaJS methods but those don’t seem to work (I never thought they would) and I have looked up some ways of DOM control with preact but I really didn’t find anything that seemed like it would work inside Fresh.

Tags:

3

Answers


  1. 0

    With FreshJs, a lightweight DOM manipulation library, you can easily control DOM elements in your project. First, make sure to include the FreshJs library in your project. After that, you can utilize its functions to interact with DOM elements.

    To access and manipulate DOM elements using FreshJs, you can use the "_" function provided by the library. For example, to access a "div" and a "button" element, you can use _("div#example") and _("button#changeText"), respectively.

    To add an event listener, you can use the "on" method. In the case of updating the text content of a "div" element when a button is clicked, you would add a click event listener to the button element. This listener would contain a callback function that updates the text content of the "div" element.

    FreshJs also offers other functions for working with DOM elements, such as "addClass", "removeClass", "toggleClass", and more. You can use these methods as needed to dynamically update a menu item or change the color of a container.

    For example, to change the color of a container, you could use the "css" method from FreshJs to update the background color of a "div" element with a specific ID, like "container", to red.

    Keep in mind that FreshJs is not associated with the Deno framework. If you’re working with Deno, you may need to look for a specific DOM manipulation library compatible with Deno or use vanilla JavaScript to control DOM elements.

    Login or Signup to reply.
  2. 0

    There is some similarity with ReactJS maybe it has ReactJS at its core I don’t know I’d never used it before, but I was seeking in its doc and I found this https://fresh.deno.dev/docs/getting-started/adding-interactivity Where they use some react hooks from preact/hooks, I believe there is useRef hook you should use.

    Login or Signup to reply.
  3. 0

    Short answer: you don’t.

    Direct DOM manipulation is problematic in JS frameworks, you want to utilize their update/rerender mechanisms instead.

    To change a color, you could do something like this:

    // islands/MyComponent.tsx
import { useState } from 'preact/hooks';

export function MyComponent() {
    const [enabled, setEnabled] = useState(false);

    return (
        <div>
            <h1 style={{ color: enabled ? 'blue' : 'red' }}>Hello World!</h1>
            <button onClick={() => setEnabled(!enabled)}>Click me to toggle the colors</button>
        </div>
    );
}

    When you click the button, it alters the state of the component, and when that happens, the component knows to rerender, reprocessing any conditional logic you have in the template.

    Fresh is built upon Preact, I recommend you go through the Preact tutorial to understand how to use it: https://preactjs.com/tutorial/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search