Concealing information using a zero value

Is there a way to conceal an HTML field if it displays a value of "0"? I manage an e-commerce site that shows the Quantity available with numeric values. I only want the number to be visible if it is greater than "0". The values are pulled from a database upload to the site. The "0" value is not part of an input field, so most of the codes I have come across offer solutions involving some sort of input condition code.

<span id="availability" class="product_availability availability-item"><p style="color: crimson; display: contents">Call for Availability. </p></span>
<span style="display: inline;" id="product_inventory">0</span>

Currently, my site shows this: Call for Availability.0 If the item has a quantity above "0", it will display: Qty On Hand: 1708 I am looking to remove the "0" and only show Call for Availability.

I have looked into similar requests on this forum and found that all responses involve using an input field. However, the issue lies in the fact that the "0" is not associated with an input field but rather generated as inventory amount within the code.

I attempted using CSS to hide the value, but this ended up hiding all values, even those above "0".

I am open to incorporating any type of code necessary such as Java, PHP, JSON, etc...

view image related to this question

htmlcss

Answer №1

To incorporate the input tag into your code, you'll need to implement a JavaScript function. Below is an example of the HTML line:

<input id="num" type=number value="0" onchange="valChange(this);"/>

function valChange(obj){
      if(obj.value=="0"){
        obj.style.color="#fff"
      } else{
        obj.style.color="#000"
      }
    }

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

Is it possible to detect inline elements that have been wrapped?

I am facing a challenge with displaying an indefinite amount of in-line elements. Depending on the width of the browser, some elements may shift to a new line. I am curious to know if it is possible to identify and isolate these rows of elements, or if the ...

javascriptjqueryhtmldom

Showing a single item from an array using ngFor in Angular 2 is a simple task that can be

When there are multiple elements in an array on my website, the template is structured like this: https://i.sstatic.net/SChtZ.png I need a button to navigate to the next element of the array and display only one set of data at a time. The user should be ...

htmlarraysangularngforangular-ng-if

Classes that are designed to be written on a single

A fellow team member recently made an addition to our project. <ol class="numbered-list list-inside" start="1"> .numbered-list { list-style-type: decimal; } .list-inside { list-style-position: inside; } Is there a problem with this code, ...

css

Analyzing the status of HTML resources in Google Chrome's DOM analyzer, comparing the cache version to the "not

When using Google Chrome, I navigate to a URL of an ASP.NET website after activating the DOM inspector (F12). By selecting the Network tab, I am able to view the requested resources along with their status, timeline, and more. Upon subsequent requests, som ...

htmlcssasp.netgoogle-chromebrowser

Chrome - Display Dilemma with Redrawing/Recoloring on Show/Hide

Encountering an unusual problem in Chrome with the navbar-brand element of my website's bootstrap navigation menu. We feature a larger site logo in the header section, along with a smaller logo inside the navbar-brand element which is initially set t ...

jquerycssgoogle-chrometwitter-bootstrap-3

Tips for separating <td> tags within a series of <td>

I am working with the HTML code provided below. <tr> <td class="slds-cell-wrap" data-label="">Category</td> <td class="slds-cell-wrap break" data-label=""><strong> Test </strong></td> <td clas ...

htmlcsshtml-table

Update the style of elements on each iteration in Symfony2

I have implemented a collapsible CSS page for FAQs. While static text works fine, I am fetching questions and answers from the database which is causing an issue. In its standard CSS version, the collapsible FAQ appears as follows: <div clas ...

phpjquerycsssymfonytwig

Added automatic prefixing to CSS variables in Visual Studio Code

I'm trying to find a way to configure css-auto-prefixer in Visual Studio Code so that it prepends the auto-prefixed css values instead of appending them. For example, when I enter a prefixable property like border-radius, the auto-prefixer adds -webk ...

cssvisual-studio-codeautoprefixer

The circular pattern includes six circles perfectly arranged within the larger circle

Can someone help me achieve perfect circular buttons using Bootstrap, CSS, and HTML5? I've tried my best but need some assistance to make them responsive as well. Here is the code I've been working on: <div class="col-md-12"> ...

javascripthtmlcsshtml5-canvasbootstrap-4

Enforcing automatic spell check on dynamically generated content

After some experimentation, I have discovered that the spell check feature in most browsers is only activated when the user moves to the next word after inputting text. Another interesting finding is that it is possible to "query" the spellchecker by simpl ...

javascriptjqueryhtmlspell-checking

Why do certain HTML elements fail to display when using ngIf?

I am facing an issue with two buttons that should display differently based on the outcome of an ngIf condition. When the page is loaded for the first time, both buttons do not appear until the page is manually refreshed, even though they are supposed to w ...

htmlangulartypescriptangular-ng-if

Tips for aligning all positioned elements in a div

I am trying to center absolute items inside my .child_div element with a green background. How can I do this properly? .parent_div { position: relative; background: lightgreen; width: 1200px; margin: auto; } .child_div { position: relative; ...

htmlcss

What is preventing me from utilizing a custom Pin it button instead of the default one?

This might not be related to code, but I am facing an issue that I can't seem to resolve. I'm attempting to use a square .png image as a "Pin It" button instead of the default one provided by Pinterest. Below is the code snippet where I am imple ...

javascripthtmlpinterest

Using AJAX and PHP to dynamically fill HTML drop-down menus

In order to populate the DropDown controls on my HTML Form dynamically, I have implemented a code that utilizes AJAX to make a call to a .php file. This .php file is responsible for filling the DropDown control with values from a single column. Throughout ...

phpjavascripthtmlajax

Overlapping text effect with CSS

Currently, I'm in the process of building a website using HTML5 and CSS3. One particular challenge I've come across is when trying to integrate two CSS images together, with one containing a few lines of text. Let me get straight to the issue at ...

htmlcss

Using CSS with multiple background images and the "contain" property

Hey there! Is it possible to have multiple background images stacked on top of each other within a single div? I want the images to resize automatically with "background-size: contain;". Have you tried this before? background-image: url('../img/ima ...

htmlcss

The Dojo claro css method utilizes absolute positioning for styling ContentPane elements

I am currently utilizing dojo 1.8 and facing an issue with unwanted padding in my bordercontainer/contentpane layout. The problem arises when I incorporate the claro css file, as it seems to apply styles directly inline to the div elements used for my cont ...

cssdojo

Full options in Bootstrap Selectpicker are not being displayed

I am currently facing an issue with a searchable list containing nearly 2700 items in a bootstrap selectpicker. When I scroll down the options, only around 50 or 60 are displayed, leaving the rest empty. You can view this problem in detail by checking out ...

htmljquerycssbootstrap-4bootstrap-selectpicker

Difficulty encountered while setting up jQuery slider

I am struggling to set up a jquery slider (flexslider) It seems like I am overlooking something very fundamental, but for some reason I just can't figure it out. Any assistance would be greatly appreciated. Please check out the link to the test site ...

javascriptjquerycsshtml

How to access elements that are dynamically added using Jquery

Similar Question: dynamic class not triggering jquery unable to select dynamically added element I am facing an issue trying to access a dynamically added element by its class name. Here is a snippet of the HTML code I am working with: <div c ...

jqueryhtml