Adjust the appearance of a div according to the input value

Question

Adjust the appearance of a div according to the input value

When a user inputs the correct value (a number) into an input of type "number," I want a button to appear. I attempted

var check=document.getElementById("buttonID").value == "1"

followed by an if statement, but it seems I made a mistake somewhere.

Here's how I envision it working:

User inputs: 1 (then presses enter)
Button appears

Currently, I have a hidden button set using display:none and an input field, that's all.

    #my input
    <div class="input-ruta">
        <input id="val" type="number">
    </div>
   #the button i want to appear when the input value is 1
   <div class="container">
        <a href="link" target="_blank"><button id="button2">
            <img class="image-class" src="image.png">
        </button></a>
    </div>

My code might be messy, but I hope you understand what I'm trying to achieve.

javascript html css button input

Answer 1

Answer №1

Make sure to validate the input value every time it changes. One way to do this is by utilizing the onkeyup event on the input element.

Here's a functioning example:

function checkInputValue(event){

  // Check if ENTER key is pressed
  if(event.key==="Enter"){
  
    // Validate the input value
    if(document.getElementById("myInput").value==="1")
    {
      // Display button
      document.getElementById("hideButton").style.display="block";
    }
    else
    {
      // Hide button
      document.getElementById("hideButton").style.display="none";
    }
  }
}

<input id="myInput" onkeyup="checkInputValue(event)">
<button id="hideButton" style="display:none;">BUTTON</button>

Answer 2

Make sure to validate the input value every time it changes. One way to do this is by utilizing the onkeyup event on the input element.

Here's a functioning example:

function checkInputValue(event){

  // Check if ENTER key is pressed
  if(event.key==="Enter"){
  
    // Validate the input value
    if(document.getElementById("myInput").value==="1")
    {
      // Display button
      document.getElementById("hideButton").style.display="block";
    }
    else
    {
      // Hide button
      document.getElementById("hideButton").style.display="none";
    }
  }
}

<input id="myInput" onkeyup="checkInputValue(event)">
<button id="hideButton" style="display:none;">BUTTON</button>

Adjust the appearance of a div according to the input value

Answer №1

Similar questions

Establishing a client cookie will help deter any attempts at re-registering

Reload the text content of a locally hosted webpage within an iframe at regular intervals

Drop-down menu in a table cell overflowing with lengthy text, causing the table to collapse

How to address hover problems in D3.js when dealing with Path elements and updating tooltip information after brushing the focus

Is a preloader needed in a Vue.js app?

Troubleshooting problem with $http in AngularJS: encountering challenges with HTTP JSONP requests

Jest identifies an open handle when working with an Express application

Location-based services: Updating the position of a Google Maps marker without refreshing the entire map interface

What could be the reason that the div is not being centered in the middle of the body?

How can I access the ng-template in a component?

Unable to append XML nodes using jQuery's parseXML function, but able to append font

Stacking a Bootstrap column above another column

Understanding fluid design concept

What is the best way to ensure an input field and a button are aligned perfectly within the same div tag and of equal height?

Discord.js Lock Command Implementation

What is the best way to display a loader when utilizing AJAX with jQuery?

Tips for automating button clicks on a website with Selenium

Ways to enlarge image size without compromising the image resolution?

Select element from Material UI displaying horizontally

Discovering the parameter unions in Typescript has revolutionized the way