The drop-down list was designed with a main button to activate it, but for some reason it is not functioning properly. Despite numerous attempts, the list simply will not display as intended

<html>
    <body>
     <button onclick="toggle()" class="nm" > main</button>
        <div class="cntnr" style="display : none;">
            <ul class="cnkid">
                <li class="cnkid"><a class="cnkid" href="delavarlogin.html">one</a></li>
                <li class="cnkid"><a class="cnkid" href="delavarsignup.html">two</a></li>
            </ul>
    </div>
    <script>
    function toggle(){
        var x =document.getElementsByClassName('nm').nextSibling;
        if(x.style.display === 'block')
        {
            x.style.display='none';}
        else{
            x.style.display='block';
        }
    }
    </script>
    </body>
    </html>

I verified the code for spelling errors and it appears to be correct (hopefully):| I have also tested the script portion and it seems accurate based on the resources I am studying from.

Answer №1

.querySelectorAll retrieves multiple elements, not just one element. It's important to specify which element you want to work with (since the .previousElementSibling method doesn't work directly on collections/arrays of elements).

var y = document.querySelectorAll('.nm')[0].previousElementSibling;
                                             ^^^

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Data cannot be transferred to a child element unless it has been initialized during the definition phase

Passing an array data from parent to child component has brought up some interesting scenarios: parent.component.html: <child-component ... [options]="students" > </child-component> Status I: Setting the array on definition ...

Ways to activate jQuery validation when submitting a form instead of triggering it on blur

I am currently utilizing the Jquery Validation plugin to validate form fields upon submission. However, I have encountered an issue where incorrect email format triggers a validation message when moving to the next input field. This behavior is undesirable ...

(Discord.JS) Bot failing to send direct message upon user joining the server

When attempting to send a DM message, I am using the following code: bot.on('guildMemberAdd', (member) => { member.send('a'); }); I am experiencing difficulty in understanding why the private message is not being successfully se ...

Is there a solution to prevent the "NavigationDuplicated" error in Vue.js when adding query parameters to the URL without changing the path?

Presently, the URL shows /search The new URL should display /search?foo=bar I am looking to modify my query parameters on the current route after applying some filters on the page. This is my code: this.$router.push({query: params}) Although I can h ...

When using JQuery's :first selector, it actually chooses the second element instead of the first

I'm facing an issue with a JQuery script that makes an AJAX request to the following URL https://djjohal.video/video/671/index.html#gsc.tab=0, which holds information about a video song. My goal is to extract and retrieve all the details from the HTM ...

Organizing stepper elements within a wrapper with bootstrap for a seamless layout

I am struggling with making a list of header icons in a Stepper container responsive to page size changes. I have attempted to adjust the placement of the container within different div elements, but it has not yielded the desired results. My current setu ...

Utilize the :not() and :hover selectors in Less when styling with CSS

Some of my elements have a specific class called .option, while others also have an additional class named .selected. I want to add some style definition for the :hover state on the .option elements, but only for those without the .selected class. I' ...

I am working on customizing my WordPress website using three.js to add a background with a wireframe effect. However, I am facing difficulties in placing a sphere at the end of each line

I have a beautiful turquoise diamond and I want to incorporate a directional camera view in the background of a WordPress section. However, I am unsure how to achieve this. The issue I'm facing is that I created a wireframe over the diamond, but when ...

Adding automatic hyphens in dates within React

My goal is to create a date field in React, similar to the one on this page, with the date format of yyyy/mm/dd. This is my current approach: const [date_of_birth,setDateofBirth] = useState(""); const handleChangeDOB = (e) => { let value = e.target ...

Looking for a resolution? Ensure that actions are plain objects by employing custom middleware specifically designed for managing asynchronous actions

I'm attempting to replicate a MERN stack project named Emaily, but I've encountered an error Error: Actions must be plain objects. Use custom middleware for async actions. Here is the code for my Action: import axios from 'axios'; im ...

Mastering parameter passing in Node.js functions: A comprehensive guide

As I embark on my journey with node js (refer to the question), please be patient as I navigate through this new territory. To clarify my query, I have developed a function to be invoked in another JS file: exports.test = function(req, res){ connection ...

Despite the presence of data within the array, the React array returns empty when examined using the inspect element tool

Currently, I'm working on creating an array of objects in React. These objects consist of a name and a corresponding color, which is used to represent the pointer on Google Maps. For instance, one object would look like this: {name: "Ben", colour: "gr ...

Comparing timestamps in JavaScript and PHP - what are the discrepancies?

I seem to be having an issue with the inconsistency in count between two timestamps. Upon page load, I set the input value as follows: $test_start.val(new Date().getTime()); //e.g. equal to 1424157813 Upon submitting the form via ajax, the PHP handler sc ...

Tips for centering a div horizontally when it exceeds the width of a mobile screen

My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...

Rotate a shape to form a Rhombus at the center

I used the transform CSS property to create a rhombus, but I noticed that the center point of the shape is off-center to the right rather than in the middle. Can anyone help me figure out how to fix this issue? You can view my code here. .rhombus{ width ...

Hover-activated dropdown menu

After reading numerous tutorials and spending hours trying to create a submenu on hover, I still can't seem to get it to work. My goal is to display "Zimmer", "Reservierung", and "Preise" in a vertical menu when hovering over "Hotel," and so on. Here ...

A guide to performing individual file testing in Quasar testing

I need to run specific test code in my Quasar project without running all tests. I've tried using the following commands, but they still run all test files. quasar test --unit jest -t "demo/demo.spec.js" quasar test --unit jest --spec "demo/demo.spec ...

How can I display the value of a radio button that has been chosen?

Would you mind sharing how to display the selected value of a radio button? I attempted it this way, but unfortunately, it did not work. You can view my code at this link. <mat-radio-group [(ngModel)]="favoriteName"> <mat-radio-button *ngFor="l ...

Utilizing arrays in JavaScript alongside jQuery's methods such as $.inArray() and .splice()

I am currently dealing with an array that is limited to containing 12 values, ranging from 1 to 12. These values can be in any order within the array. My task is to iterate through the array and identify the first unused value, assigning it to a variable. ...

What is the reason for needing a page reload in Javascript or JQuery?

I'm curious why Javascript or jQuery require a page reload before applying certain effects. CSS updates in real-time, as demonstrated by the following example: This changes dynamically without needing to refresh the page @media all and (max-width:7 ...