Onclick Function in Dropdown Menu not working

Question

I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function. Can anyone point out where I'm going wrong?

function show(anything) {
  document.querySelector('.textBox').value =
    anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
  dropdown.classList.toggle('active');
}

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: #fafafa;
}

.dropdown {
  position: relative;
  margin-top: 100px;
  width: 300px;
  height: 50px;
}

.dropdown::before {
  content: "";
  position: absolute;
  right: 20px;
  top: 15px;
  z-index: 10000;
  width: 8px;
  height: 8px;
  border: 2px solid #333;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg);
  transition: 0.5s;
  pointer-events: none;
}

.dropdown.active::before {
  top: 22px;
  transform: rotate(-225deg);
}

.dropdown input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100;
  cursor: pointer;
  background: #fff;
  border: none;
  outline: none;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  padding: 12px 20px;
  border-radius: 10px;
}

.dropdown .option {
  position: absolute;
  top: 70px;
  width: 100%;
  background: #fff;
  box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  /*display: none*/
  ;
}

.dropdown.active .option {
  display: block;
}

.dropdown .option div {
  padding: 10px 20px;
  cursor: pointer;
}

.dropdown .option div:hover {
  background: #62baea;
  color: #fff;
}

<body>
  <h2>Converter</h2>
  <label>Litres</label>
  <div class="dropdown">
    <input type="text" class="textBox" placeholder="HTML" readonly>
    <div class="option">
      <div onlcick="show('HTML')">HTML</div>
      <div onclick="show('HTML')">HTML</div>
      <div onclick="show('HTML')">HTML</div>
      <div onclick="show('HTML')">HTML</div>
    </div>
  </div>
</body>

I have tried some fixes but couldn't find out the problem.

Note: I'm pretty new in this field.

Mara Black · Accepted Answer · 2022-09-09 11:34:05Z

You need to add addEventListener in order to append an action:

function show(anything) {
  document.querySelector('.textBox').value =
    anything;
}
let dropdown = document.querySelector('.dropdown');

dropdown.addEventListener('click', function(event) { // add click function
  dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: #fafafa;
}

.dropdown {
  position: relative;
  margin-top: 100px;
  width: 300px;
  height: 50px;
}

.dropdown::before {
  content: "";
  position: absolute;
  right: 20px;
  top: 15px;
  z-index: 10000;
  width: 8px;
  height: 8px;
  border: 2px solid #333;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg);
  transition: 0.5s;
  pointer-events: none;
}

.dropdown.active::before {
  top: 22px;
  transform: rotate(-225deg);
}

.dropdown input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100;
  cursor: pointer;
  background: #fff;
  border: none;
  outline: none;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  padding: 12px 20px;
  border-radius: 10px;
}

.dropdown .option {
  position: absolute;
  top: 70px;
  width: 100%;
  background: #fff;
  box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  /*display: none*/
  ;
}

.dropdown.active .option {
  display: block;
  background-color: grey;
}

.dropdown .option div {
  padding: 10px 20px;
  cursor: pointer;
}

.dropdown .option div:hover {
  background: #62baea;
  color: #fff;
}

<body>
  <h2>Converter</h2>
  <label>Litres</label>
  <div class="dropdown">
    <input type="text" class="textBox" placeholder="HTML" readonly>
    <div class="option">
      <div onlcick="show('HTML')">HTML</div>
      <div onclick="show('HTML')">HTML</div>
      <div onclick="show('HTML')">HTML</div>
      <div onclick="show('HTML')">HTML</div>
    </div>
  </div>
</body>

Collectives™ on Stack Overflow

Onclick Function in Dropdown Menu not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related