Trouble arises with kids when trying to adjust the display to block mode

I need to set all the div elements inside the div with id "editor" to display as block. However, when I change the display property of the div with id "editor", only that specific div's display is affected, while everything else inside the div becomes display none.

Below is the code snippet:

doctype html
html
head
    title #{title} - My Site
    link(rel='stylesheet', href='stylesheets/style.css')
    script(src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js")
    script.
        function name(id, id2){
            document.getElementById(id).style.display = 'block';
            document.getElementById(id2).style.display = 'none';
            //document.getElementById(id3).style.display = 'none';
            }
body(onload ='name("rename", "ineditortxt")')
    div(id="rename", class="Name")
    h1= "Enter File Name"
    form(id = "filename", method ="post")
        input(id="new_name", type ="text", placeholder="File Name")
        input(id="Okay", type="submit", value="Okay")

div(id="ineditortxt")
    h1= "Welcome to Editor"
    div(id="editor")
        |Welcome to the home pages
        |This is the first Paragraph
    script(src="javascripts/ace.js", type="text/javascript")
    script.
            var editor=ace.edit("editor");
    script(src="/jvm.js", type="text/javascript")
script.
    document.getElementById('filename').addEventListener('submit',function(e){
        e.preventDefault();
        document.getElementById("ineditortxt").style.display = 'block';
        document.getElementById("editor").style.display='block';
        document.getElementById("rename").style.display = 'none';
    });

Answer №1

The text language in your message is unknown to me, but based on the "jquery" tag in your question, the jQuery code to achieve what you're explaining is:

$("#editor, #editor div").css("display", "block");

If you were not using jQuery, it would look like this:

var editor = document.getElementById("editor");
editor.style.display = "block";

var insideDivs = editor.getElementsByTagName("div");
for (var i = 0; i < insideDivs.length; i += 1) {
    insideDivs.style.display = "block";
}

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

Modifying the Redux state using an array with prototypes

In my React application, I am utilizing Redux along with the ChartJS library to create charts. Occasionally, when I extract an array from the global Redux state, it appears in this format: ejeY: Array(7) 0: 43783 1: 85001 2: 100960 3: 752 ...

Loading an empty CSS file in Node.js

Just starting out with node.js, and I could really use some help with a small css and image issue that I'm facing. I've streamlined my html and .js for clarity. Despite trying everything, the css and image just won't load. My form and server ...

Prevent screen from loading without JavaScript using an overlay

Is there a way to darken and lock the page, preventing clicking or scrolling, while displaying white text notifying the user that JavaScript is not enabled? I understand that the recommended approach is to gracefully degrade all elements when JavaScript i ...

The presence of Firefox Marionette has been identified by hCaptcha

Whenever I go on indeed.com using the firefox web driver in Marionette mode, I keep encountering an hCaptcha popup. In an attempt to avoid this, I experimented with a user script that alters the navigator.webdriver getter to return false right at the sta ...

Extract the body.req object within a loop in a Node.js application

I'm looking to efficiently parse and save the body of a POST request using Mongoose in Node.js. Is there a way to use a for loop to accomplish this task, rather than manually saving every property? My ideal solution would involve something like: for ...

Is there a way for me to adjust the window's placement?

Currently utilizing Jquery to launch a new Telerik window, as shown below: var win = $('#myWindow').data('tWindow'); win.open(); With the knowledge of the mouse position (x,y), my goal is to initiate the window at that exact location. ...

Enhance your WooCommerce shopping experience by incorporating a variety of personalized checkout fields organized into two distinct

I have implemented custom code to create unique checkout fields based on the number of products in a customer's cart. Each product requires 4 customized checkout fields, displayed in two columns side by side. The expected result is as follows: co ...

Strategies for managing the "ref" property of Material-UI component props within our custom components

I have a unique custom component setup as shown below: // ... import { PaperProps, styled } from '@mui/material'; type ComponentProps = PaperProps & { a: string, b: string }; export const MyPaper = styled(Paper)(/* ... */); const Compo ...

Reactivity in Vue not responding when listening from a different object

Can someone help me understand why my Vue object is not reactive to changes in another object? See the code snippet below. exampleObject = { exampleProperty: null } exampleObject.update = function () { this.exampleProperty = 'updated data&apo ...

What steps can I take to ensure these three images all have identical height and width?

Just starting out with Bootstrap 4 and I have a question about making images inside a card the same height and width. Can anyone help me figure out which div to input an attribute to achieve this? Here's the HTML code below the image: <link href ...

Dealing with timeout errors when using Puppeteer's page.waitForNavigation()

When using puppeteer, I initiate a page by entering a value and it displays the resulting output. await page.click('button[class="button form-button rs-gcbalance-btn"]') await page.waitForSelector('div[class="small-4 large-4 rs-gcbalance-r ...

Accessing multi-dimensional array properties in PHP with JavaScript integration

In my PHP code, I have an array structured like this: <?php $data = array(); $data[0] = array('year' => 2001, 'month' => array( 'January' => array('val1' => 1000, 'v ...

Swapping out data points using JQuery

What could be causing line 10 to return null? Click here for the code file The code seems to function properly with line 40, but not with line 10. ...

Constant updates similar to FourSquare

I'm looking to add a real-time status update feature inspired by popular websites using ASP.NET MVC + jQuery Is there anyone aware of tutorials or samples that could help me achieve this? ...

What's the issue with this HTML button not functioning properly?

I'm having an issue with a button in my code that is supposed to change the text from 'hello' to 'Goodbye', but for some reason, it's not working. I have ensured that my code is properly indented in my coding program. Below i ...

When using Vue computed, an error is thrown stating "Issue in rendering: 'InternalError: too much recursion'" if the same key is referenced in computed

As a newcomer to Vue, I wanted to track how many times a function in the computed section gets called. To achieve this, I created the following component: const ComputedCounter = { name: "ComputedCounter", template: ` <span>{{ value } ...

The reduced motion media query prevented me from using a Bootstrap modal with animations

I'm currently working with Bootstrap 4 modals and I've encountered an issue where the fade animation and slide animation are not being displayed. After doing some research, I discovered that the problem lies within the transitions.scss file which ...

Static Header - Halts Animation on Downward Scroll, Resumes when Scrolling Ceases

I've implemented a fixed menu on my website. Everything seems to be working fine, but here's the issue: When I scroll down and the fixed menu starts animating, if I continue scrolling quickly, the animation pauses. It only continues when I stop ...

Managing browser navigation within a web application

I am currently developing a web-based application for internal use in the company I work for. The application is quite intricate, featuring numerous forms that will enable users to both view and input data, which will then be stored in a database upon savi ...

Tips for retrieving multiple values or an array from an AJAX request?

Is there a correct way to pass multiple sets (strings) of data back after executing an ajax call in php? I understand that echo is typically used to send a single string of data back, but what if I need to send multiple strings? And how should I handle th ...