What is the best way to toggle text visibility with a button click and what alternative method can be used if getElement does not work?

Question

What is the best way to toggle text visibility with a button click and what alternative method can be used if getElement does not work?

After successfully completing the HTML and CSS part, I hit a roadblock with JavaScript. I'm struggling to figure out how to create a button that can toggle the visibility of text when clicked.

An error message keeps popping up in the console stating that getElement is not defined. I attempted using getElementByClassName, but the issue persists.

The console displays

Uncaught ReferenceError: getElement is not defined

as well as for getElementByClassName.

--

In this scenario:

nav-btn refers to the button responsible for toggling the text

nav-links indicates the text that should appear or disappear

--

The JavaScript snippet provided is as follows:

const links = getElement(".nav-links")
const navBtn = getElementByClassName('nav-btn')

links.style.display = 'none';

navBtn.onclick = function () {
    if (links.style.display !== "none") {
        links.style.display = "none"
    } else {
        links.style.display = "block"
    }
}

How can I modify this code to achieve the desired functionality?

Furthermore, how should I address the undefined getElement issue?

javascript html css button

Answer 1

Answer №1

Since you are attempting to use getElement as a native JS function, know that it is not defined and therefore not available.
If you wish to select an element by its class name, consider using querySelector.

const links = document.querySelector('.nav-links')

Remember, getElementsByClassName returns an array of nodes, rather than a single element. For your specific scenario, switch to utilizing querySelector.

const navBtn = document.querySelector('.nav-btn')

Answer 2

Since you are attempting to use getElement as a native JS function, know that it is not defined and therefore not available.
If you wish to select an element by its class name, consider using querySelector.

const links = document.querySelector('.nav-links')

Remember, getElementsByClassName returns an array of nodes, rather than a single element. For your specific scenario, switch to utilizing querySelector.

const navBtn = document.querySelector('.nav-btn')

Answer 3

Answer №2

Under your post, it was noted that getElement is not a standard JS DOM method, resulting in the error you are encountering. Instead of using this method, I recommend utilizing querySelector, along with applying an event listener to the button. By incorporating CSS and classList, you can easily toggle the visibility by adding or removing a show class. This approach leads to shorter and more readable code.

const links = document.querySelector(".nav-links")
const navBtn = document.querySelector('.nav-btn')

navBtn.addEventListener('click', handleToggle, false);

function handleToggle() {
  links.classList.toggle('show');
}

.nav-links { display: none; }
.show { display: block; }

<div class="nav-links">Navigation Links</div>
<button class="nav-btn">Toggle Navigation!</button>

Answer 4

Under your post, it was noted that getElement is not a standard JS DOM method, resulting in the error you are encountering. Instead of using this method, I recommend utilizing querySelector, along with applying an event listener to the button. By incorporating CSS and classList, you can easily toggle the visibility by adding or removing a show class. This approach leads to shorter and more readable code.

const links = document.querySelector(".nav-links")
const navBtn = document.querySelector('.nav-btn')

navBtn.addEventListener('click', handleToggle, false);

function handleToggle() {
  links.classList.toggle('show');
}

.nav-links { display: none; }
.show { display: block; }

<div class="nav-links">Navigation Links</div>
<button class="nav-btn">Toggle Navigation!</button>

What is the best way to toggle text visibility with a button click and what alternative method can be used if getElement does not work?

Answer №1

Answer №2

Similar questions

Troubleshooting Problems with Node JS Express, Passport JS, and Authentication on Android Devices

Optimizing Three.js for better performance

Discover the best way to highlight a specific area using imgareaelect

Vercel Alert: (Azure) Missing OpenAI API key

I can't seem to figure out why I constantly struggle with adding a check mark to a checkbox using

Loop through each instance of a data record in a JSON document using Vue's v-for directive

Verify if the screen is in full view by monitoring document.fullscreenElement within Vue3

What exactly is a doclet as defined in JSDoc documentation?

Managing multiple to-do lists within a React application using parent-child relationships

How can I ensure that the HTML I retrieve with $http in Angular is displayed as actual HTML and not just plain text?

What is the best way to use a Handlebars file on multiple routes?

Creating a list in React and adding a delay using setTimeout() method

Problem with selecting odd and even div elements

How can I set up a cycling image background for the main div and a floating menu?

Enhancing the alignment of div elements

Increase the visibility of a div using Jquery and decrease its visibility with the "

What is the best way to pass a variable and its corresponding state-updating function as a prop in a React component?

Tips for deleting "Category: [category name]" in Wordpress

How can I convert a string to an integer in Node.js/JavaScript in terms of cardinality?

"Unexpected behavior: PHP+JS getElementById() function is returning an integer value instead of a