Invisible tag remains unseen

Question

Invisible tag remains unseen

I need to dynamically hide some text and show specific labels upon clicking a button. How can I achieve this?

<body>
        <div id="middle">
            <div id="left">
            </div >
            <div id="m">
            Name: <input type="text" name="y1"><br />
            Family: <input type="text" name="y1"><br />
            Phone: <input type="text" name="y1"><br />

            <label style="display: none "  name="y2" >A </label>
            <label  style="display: none " name="y2" >B </label>
            <label style="display: none " name="y2" >C </label>
            <button  onclick="myFunction()">Hide elements</button>

            <script>
            function myFunction() {
              var x = document.getElementsByName("y1");
              for (var i = 0; i < x.length; i++) {
                x[i].style.display = "none";
              }
              var x = document.getElementsByName("y2");
              for (var i = 0; i < x.length; i++) {
                x[i].style.display = "visible !important"; 
              }
            }
            </script>
    </div>
    </body>

javascript html css

Answer 1

Answer №1

The reason for this issue is that the display CSS property is not set to visible. The correct value for display should be inline when used for a label.

In addition, it seems like there is a misuse of the label element in your code. The label element should be associated with a form field, which is missing in your implementation. Consider using span elements instead.

Avoid inline styles and event handlers. It's recommended to use CSS classes for styling and keep all scripting within the script tag.

.hidden { display:none; }

Name: <input type="text" name="y1" class="hidable"><br>
Family: <input type="text" name="y2" class="hidable"><br>
Phone: <input type="text" name="y3" class="hidable"><br>

<span class="hidden y2">A</span>
<span class="hidden y2">B</span>
<span class="hidden y2">C</span>
<button>Hide elements</button>

<script>
  // Get the inputs and spans into their own Arrays
  let inputs = Array.prototype.slice.call(document.querySelectorAll("input.hidable"));
  let spans = Array.prototype.slice.call(document.querySelectorAll("span.y2")); 
              
  // Set up the click event handler in JavaScript, not in HTML
  document.querySelector("button").addEventListener("click", hideShow);
              
  function hideShow() {
    // Loop over the inputs
    inputs.forEach(function(input){
      input.classList.add("hidden"); // Hide the input
    });
                
    // Loop over the spans
    spans.forEach(function(input){
      input.classList.remove("hidden"); // Show the span
    });
  }
</script>

Answer 2

The reason for this issue is that the display CSS property is not set to visible. The correct value for display should be inline when used for a label.

In addition, it seems like there is a misuse of the label element in your code. The label element should be associated with a form field, which is missing in your implementation. Consider using span elements instead.

Avoid inline styles and event handlers. It's recommended to use CSS classes for styling and keep all scripting within the script tag.

.hidden { display:none; }

Name: <input type="text" name="y1" class="hidable"><br>
Family: <input type="text" name="y2" class="hidable"><br>
Phone: <input type="text" name="y3" class="hidable"><br>

<span class="hidden y2">A</span>
<span class="hidden y2">B</span>
<span class="hidden y2">C</span>
<button>Hide elements</button>

<script>
  // Get the inputs and spans into their own Arrays
  let inputs = Array.prototype.slice.call(document.querySelectorAll("input.hidable"));
  let spans = Array.prototype.slice.call(document.querySelectorAll("span.y2")); 
              
  // Set up the click event handler in JavaScript, not in HTML
  document.querySelector("button").addEventListener("click", hideShow);
              
  function hideShow() {
    // Loop over the inputs
    inputs.forEach(function(input){
      input.classList.add("hidden"); // Hide the input
    });
                
    // Loop over the spans
    spans.forEach(function(input){
      input.classList.remove("hidden"); // Show the span
    });
  }
</script>

Answer 3

Answer №2

Are you looking for this specific solution?

function myFunction() {
  var x = document.getElementsByName("y1");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  var x = document.getElementsByName("y2");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "inline";
  }
}

<div id="middle">
  <div id="left">
  </div>
  <div id="m">
    Name: <input type="text" name="y1"><br /> 
    Family: <input type="text" name="y1"><br /> 
    Phone: <input type="text" name="y1"><br />

    <label style="display: none " name="y2">A </label>
    <label style="display: none " name="y2">B </label>
    <label style="display: none " name="y2">C </label>
    <button onclick="myFunction()">Hide elements</button>

  </div>
</div>

If this is what you have in mind, keep in mind that the display property has multiple values other than inline. It might be helpful to learn more about CSS Layouts. Check out this link to get started: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout

Answer 4

Are you looking for this specific solution?

function myFunction() {
  var x = document.getElementsByName("y1");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  var x = document.getElementsByName("y2");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "inline";
  }
}

<div id="middle">
  <div id="left">
  </div>
  <div id="m">
    Name: <input type="text" name="y1"><br /> 
    Family: <input type="text" name="y1"><br /> 
    Phone: <input type="text" name="y1"><br />

    <label style="display: none " name="y2">A </label>
    <label style="display: none " name="y2">B </label>
    <label style="display: none " name="y2">C </label>
    <button onclick="myFunction()">Hide elements</button>

  </div>
</div>

If this is what you have in mind, keep in mind that the display property has multiple values other than inline. It might be helpful to learn more about CSS Layouts. Check out this link to get started: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout

Invisible tag remains unseen

Answer №1

Answer №2

Similar questions

Troubleshooting PHP webpage with dysfunctional Python AJAX functionality

Executing functions from main component in tanstack table operations

Iterate through a collection of JSON objects using JavaScript

Vue watchers capturing original value prior to any updates

Concealing specific outcome by implementing jQuery and AJAX with a database

Angulating Service Testing

Hiding horizontal lines in a table without affecting vertical lines (Material-ui) - a step-by-step guide

Using Jasmine to simulate multiple method calls in a testing environment

Solving data within an Angular Controller

How to display two elements side by side within a div using React

exploring asynchronous javascript behavior utilizing the sleep/setTimeout function in the context of THREEJS and Angular

What is the best way to implement a dynamic Menu Component in next.js?

Using the Javascript jQuery post() or get() method to pass a JSON object within a closure function prior to

The Vue3 property 'x' is not recognized on type 'Function' as a global property

The POST function is executed twice, with the first attempt resulting in a failed API call, but the second attempt is

What is the best way to include a .wav file within a PHP if statement?

Expandable Grid with UI-GRID - Automatically expand a row when clicked on

What is the best way to integrate Emotion styled components with TypeScript in a React project?

Exploring Vue.prototype attributes and utilizing them

Adding a button to the right of a text-field input in Vuetify app