CSS manipulation through JavaScript poses a challenge

My attempt to update a form is causing some issues. I have been conducting tests with the following elements:

<span id="a">30 <span id="aa" style="display:none;"><input type="text" id="aa" name="q"/></span></span>
<span id="cq"><a href="javascript:changeQty()">Change</a></span>
<span id="cq2" style="display:none"><a href="javascript:save()">save</a></span>

<script>
  function changeQty(){
    document.getElementById("a").style.display="hidden";
    document.getElementById("aa").style.display="inline";
    document.getElementById("cq").style.display="hidden";
    document.getElementById("cq2").style.display="inline";
  }
</script>

Despite my efforts, I am facing difficulties in hiding certain fields. Interestingly, when I click on the Change link, the hidden fields become visible. What could be the issue here?

javascriptcsshidden-field

Answer №1

The display attribute does not have a hidden option, you should use none instead.

function hideElement(){
  document.getElementById("a").style.display="none";
  document.getElementById("aa").style.display="inline";
  document.getElementById("cq").style.display="none";
  document.getElementById("cq2").style.display="inline";
}

Answer №2

Two simple errors have been made in your code

  1. When using JavaScript, use "none" for the display style attribute to hide an element

  2. The element "aa" is a child of element "a", so when you set
    document.getElementById("a").style.display="none"; it will also hide the element "aa"

Therefore, the final solution you may want to consider is as follows

<span id="a">30</span>
<span id="aa" style="display:none;"><input type="text" id="aa" name="q"/></span>
<span id="cq"><a href="javascript:changeQty()">Change</a></span>
<span id="cq2" style="display:none"><a href="javascript:save()">Save</a></span>

<script>
  function changeQty() {
    document.getElementById("a").style.display="none";
    document.getElementById("aa").style.display="inline";
    document.getElementById("cq").style.display="none";
    document.getElementById("cq2").style.display="inline";
   }
</script>

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

Populating an HTML form using a Node.js server

I am looking for a way to automate filling an HTML form's input fields, submitting it, and retrieving the body of the page. After some research, I came across a module called form-scraper. However, when I tried implementing it, I encountered the follo ...

javascriptnode.jsweb-scraping

Arrange four Divs next to each other with flexbox styling

I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul> Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsive ...

javascripthtmlcssresponsive-designuser-experience

Unable to locate xpath during the second iteration or attempt

As a newcomer and hobbyist programmer, I have hit a wall with this particular issue. My goal is to loop through a website and extract data to print. While my code successfully retrieves data from the first link, I am struggling to make it "click" on the se ...

javascriptpythonselenium

In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

I have a method that retrieves margin top value from the backend. It works perfectly on the first page of print, but on the second page, the margin top space is missing. initializePrintingSettings() { this.printService.fetchPrintSettings().subscribe(respon ...

javascripthtmlcssangulartypescript

Delete the placeholder image from a div once live content has been inserted into it

If I have a container div that displays an image when empty, but I want to remove the image when content is dynamically added to the container, what would be the most effective way to do this with jQuery? The usual method of checking if the container' ...

javascriptjqueryhtmlcss

How can you style an HTML tag using esc_html in CSS?

I've encountered an issue while editing the woocommerce orders.php template. This template is responsible for displaying the user's placed orders. I have identified several variables that require secure coding, such as $date_created or $view_orde ...

phphtmlcsswordpressescaping

Enhance Your Contact Form with jQuery Validation Engine

I have implemented a contact form with added features of jQuery fadeLabel and validationEngine to enhance its appearance on the page. The file containing this code is either index.php or .html, which I have not yet determined. Here is the script from my i ...

javascriptjqueryajaxformsjquery-validation-engine

Overflowing Bootstrap navbar problem

After adjusting the navbar height, the overflowing issue was resolved, but I specifically want it to be set at 5rem. Currently, the content of the navbar exceeds the 5rem height and mixes with the main body content, regardless of what modifications I make. ...

javascripthtmlcssbootstrap-5

Switching images with Jquery

Seeking help to create an FAQ page using HTML, CSS, and jQuery. My goal is to rotate an arrow when a question is opened and revert it back when another question is clicked. I've successfully achieved this with <p> tags but facing issues with the ...

jquerycsshtml

An issue has occurred while trying to execute the npm start command within PhpStorm

When I try to run npm start on Windows' command prompt, it works fine. However, I encounter errors when running it in the PhpStorm Terminal. You can see the errors here. Is this a result of them being different platforms or could it be related to som ...

javascriptnode.jscmdnpmphpstorm

Can Dropdown Items Be Generated Dynamically?

In the realm of React development, I find myself in need of a specific number of dropdown menus for a particular project. Each dropdown menu is expected to offer multiple options for selection. Typically, I would employ a straightforward map function to ha ...

javascriptreactjsdrop-down-menu

What is the best way to eliminate "?" from the URL while transferring data through the link component in next.js?

One method I am utilizing to pass data through link components looks like this: <div> {data.map((myData) => ( <h2> <Link href={{ pathname: `/${myData.title}`, query: { ...

javascriptreactjsnext.js

Tips for querying orchestrate.io

Recently, I found myself in need of a user-friendly database for a small highscore system in my game development projects using JavaScript. Through the Github student developer pack, I came across Orchestrate.io. After discovering a suitable driver module ...

javascriptnode.jsexpress

Element vanishing post JSON parsing

I have encountered an intriguing issue: I have developed an HTML/JS project that extracts information using XMLHttpRequest from the Scratch website. The main objective is to allow users to input their username and view their profile description on Scratc ...

javascripthtmljsonxmlhttprequestreplit

Guide on Loading and Implementing Fonts from a Self-Hosted Server in a React Application using MUI

I'm currently developing a React application with the MUI library and encountering an issue related to dynamically setting the font-family. The main objective is to provide users with the option to choose a font from a configurator, where fonts are ho ...

javascriptreactjsmaterial-uifontstypography

Display a featherlightbox popup when the page loads

Well, here's the deal. I don't have any experience with wordpress php coding at all, but I can make basic adjustments using the wordpress admin. Now I've run into an issue. I tried to use the feather lightbox js, and below is a snippet of co ...

javascriptphpjqueryhtmlwordpress

"MongoDB Aggregating Data with Nested Lookup and Grouping

I have 3 collections named User, Dispensary, and City. My desired result structure is as follows: { _id: , email: , birthdate: , type: , dispensary: { _id: , schedule: , name: , address: , phone: , u ...

javascriptjsonmongodbexpressmongoose

Access arrays/objects within main object using JavaScript's Object.keys()方法

Perhaps the title is a bit confusing, but I couldn't come up with a better way to phrase it. I have a function that determines the value of each property within a contact object and returns 'No Data' if the value is null/empty/undefined. Ho ...

javascriptarraysjsonobject

Having trouble with your HTML5 canvas?

Below is the JS code snippet: function DisplayText(output, x, y){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillText ("A" , x, y); ctx.font = 'bold 20px sans-serif'; ...

javascripthtmlcanvas

Which task is prioritized for execution?

With my PHP web application, I am unsure which code will be called and processed first. Inside my PHP file, there is also a block of JavaScript: <script> $(document).ready(function(){}); </script> In the PHP code, I send an array object to t ...

phpjavascriptjqueryajax