TransWikia.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!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

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