AnswerBun.com

Why does the ul element show when input is clicked?

Stack Overflow Asked by E. Reiner on January 5, 2022

For some reason the ul gets display: none, and is not displayed even when the impute element is clicked.
This is the html
When this is clicked:

 <input class="input country" type="text"/>

This html should show (but it doesn’t):

 <ul id='country-list'>
                <li id="US">United States</li>
 </ul>

This is the jQuery code:

function handleCountries() {
    $('#country-list').hide();
    $('#country').click(function () {
        $("#country-list").show();
    });
};

function handleTestOut() {
    handleCountries()
};

$(handleTestOut)

This is the html:

 <div class="container">
            <input class="input country" type="text"/>
            <ul id='country-list'>
                <li id="US">United States</li>
            </ul>
            <button>explore</button>
        </div>

This is some css:

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.input {
  height: 30px;
  margin-bottom: 50px;
}

ul {
  height: 200px;
  width: 18%;
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  background-color: blue;
  top: 20px
}

Here is the full code

Edit: I removed the invalid html, but am getting the same results

absolutecsshtmljquery

One Answer

You hide it with: $('#country-list').hide();

And what is with this functions calling each other?

You are using jQuery to call handleTestOut function in witch you call handleCountries function. It does not make much sense.

You will get absolutely same result if you just leave it out of functions:

But your main problem was you don't have #country id you have .country CSS class for click calling (or use input.country or .input class, or all of it input.country.input): 

$('#country-list').hide();

$('.country').click(function() {
  $("#country-list").show();
});
html {
  height: 100%;
}

body {
  font-family: 'Nunito', sans-serif;
  color: #1b4639;
  background: #cbe2e4;
  height: 100%;
}

.wrapper {
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

p {
  text-align: center;
  margin: 0;
  font-size: 24px;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.input {
  height: 30px;
  margin-bottom: 50px;
}

ul {
  height: 200px;
  width: 18%;
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  background-color: blue;
  top: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <p>Hello World!</p>
    <div class="container">
      <input class="input country" type="text" />
      <ul id='country-list'>
        <li id="US">United States</li>
        <li id="AF">Afghanistan</li>
        <li id="AX">Åland Islands</li>
        <li id="AL">Albania</li>
        <li id="DZ">Algeria</li>
        <li id="AS">American Samoa</li>
        <li id="AD">Andorra</li>
        <li id="AO">Angola</li>
        <li id="AI">Anguilla</li>
        <li id="AQ">Antarctica</li>
        <li id="AG">Antigua and Barbuda</li>
        <li id="AR">Argentina</li>
        <li id="AM">Armenia</li>
        <li id="AW">Aruba</li>
        <li id="AU">Australia</li>
        <li id="AT">Austria</li>
        <li id="AZ">Azerbaijan</li>
        <li id="BS">Bahamas</li>
        <li id="BH">Bahrain</li>
        <li id="BD">Bangladesh</li>
        <li id="BB">Barbados</li>
        <li id="BY">Belarus</li>
        <li id="BE">Belgium</li>
        <li id="BZ">Belize</li>
        <li id="BJ">Benin</li>
        <li id="BM">Bermuda</li>
        <li id="BT">Bhutan</li>
        <li id="BO">Bolivia, Plurinational State of</li>
        <li id="BQ">Bonaire, Sint Eustatius and Saba</li>
        <li id="BA">Bosnia and Herzegovina</li>
      </ul>
      <button>explore</button>
    </div>
  </div>
</body>

</html>

Answered by ikiK on January 5, 2022

Add your own answers!

Related Questions

Key Error: value not in index ….. but it is there

1  Asked on January 22, 2021 by afab421

       

How do I use Firebase Admin SDK to change data in Firebase Realtime Database while using Cloud Functions?

1  Asked on January 22, 2021 by tom-darious

         

How do I keep a prompt at the bottom of the screen in C?

0  Asked on January 22, 2021 by wafwoof

 

How to inject nested (inner) non-static class in micronaut?

0  Asked on January 22, 2021 by wureka

       

How to check for errors in list? [problem not solved]

1  Asked on January 22, 2021 by hatten

     

How does one create a filter condition based on a configuration object for filtering data-items of an array?

1  Asked on January 22, 2021 by frontmaster

         

Detecting Modal Sheet On Drag Down Event

2  Asked on January 21, 2021 by jayvdiyk

       

URL query parameters to dict python

8  Asked on January 21, 2021 by leonardo-andrade

       

jQuery removeClass not working with draggable

1  Asked on January 21, 2021 by heila-al-mogren

     

`yarn semantic-release-cli setup` fails with 404 from github authorizations API

0  Asked on January 21, 2021 by tvanc

   

How to keep a separate count for each item in a list, inside a loop which satisfies an if statement

2  Asked on January 21, 2021 by enthusiast

 

How can I get a stack trace when running Qt5 applications in a debugger?

1  Asked on January 21, 2021

         

Angular 10 webworker Cannot find name ‘Element’. – How to resolve?

1  Asked on January 21, 2021 by samantha-adrichem

   

How I can pass data between screens in React Native

2  Asked on January 21, 2021 by tuan-nguyen

   

Building a reference to a named column out of a passed vector

0  Asked on January 21, 2021 by sherman-sims

 

If div children don’t have same text content then do action

1  Asked on January 21, 2021 by lucr

         

Android Studio EditText cannot be null Error

3  Asked on January 21, 2021 by smish_

         

Splitting list into 2 parts, as equal to sum as possible

3  Asked on January 21, 2021 by jonathon

     

Camel router Builder with Java 6

0  Asked on January 21, 2021 by fiddle

   

Python ctypes: OSError: exception: access violation writing 0x00000000

1  Asked on January 21, 2021 by oliverx

   

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP