CODEWITHSUNDEEP
javascripthtmljquerycss
maliaLikesCoding
maliaLikesCoding

Reputation: 41

Change dropbtn text with value of clicked option in the dropdown-content

I need help figuring out how to change the button text with whatever dropdown menu item is clicked. I was trying to do using onclick, but I couldn't figure out how to make it work. My professor suggested using the class attribute, jquery click() and the attr() method. Any suggestions or hints you can give would be helpful. I am open to using a different kind of drop down menu, but it does have to be a hover drop down menu that scrolls instead of showing the full list.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

.force-scroll {

overflow-y: scroll;

height: 200px;

}
</style>
</head>
<script>
</script>
<body>
 <table style="width:25%">
        <tr>
            <td valign= "top">
                <h3 id= "total">Orders for</h3>
        </td>
       <td>
<div class="dropdown force-scroll">
  <button id="month" class="dropbtn">Jan</button>
  <div class="dropdown-content">
    <a class="option" href="#" onclick="selected=Jan">Jan</a>
    <a class="option" href="#" onclick="selected=Feb">Feb</a>
    <a class="option" href="#" onclick="selected=Mar">Mar</a>
    <a class="option" href="#" onclick="selected=Apr">Apr</a>
    <a class="option" href="#" onclick="selected=May">May</a>
    <a class="option" href="#" onclick="selected=Jun">Jun</a>
    <a class="option" href="#" onclick="selected=Jul">Jul</a>
    <a class="option" href="#" onclick="selected=Aug">Aug</a>
    <a class="option" href="#" onclick="selected=Sep">Sep</a>
    <a class="option" href="#" onclick="selected=Oct">Oct</a>
    <a class="option" href="#" onclick="selected=Nov">Nov</a>
    <a class="option" href="#" onclick="selected=Dec">Dec</a>
  </div>
</div>
</td>
 </tr>
        </table>
</body>
</html>

Upvotes: 2

Views: 179

Answers (2)

CodeView
CodeView

Reputation: 500

use fixed :
 Create function and call function in the a harf and send values

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
        .dropbtn {
          background-color: #4CAF50;
          color: white;
          padding: 16px;
          font-size: 16px;
          border: none;
        }
        
        .dropdown {
          position: relative;
          display: inline-block;
        }
        
        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f1f1f1;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
          z-index: 1;
        }
        
        .dropdown-content a {
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
        }
        
        .dropdown-content a:hover {
          background-color: #ddd;
        }
        
        .dropdown:hover .dropdown-content {
          display: block;
        }
        
        .dropdown:hover .dropbtn {
          background-color: #3e8e41;
        }
        
        .force-scroll {
          overflow-y: scroll;
          height: 200px;
        }
      </style>
    </head>
    
    <body>
      <table style="width:25%">
        <tr>
          <td valign="top">
            <h3 id="total">Orders for</h3>
          </td>
          <td>
            <div class="dropdown force-scroll">
              <button id="month" class="dropbtn" >Jan</button>
              <div class="dropdown-content" id="main">
                <a  href="#" onclick="get_onclick(0)" >Jan</a>
                <a  href="#" onclick="get_onclick(1)" >Feb</a>
                <a  href="#" onclick="get_onclick(2)" >Mar</a>
                <a  href="#" onclick="get_onclick(3)" >Apr</a>
                <a  href="#" onclick="get_onclick(4)" >May</a>
                <a  href="#" onclick="get_onclick(5)" >Jun</a>
                <a  href="#" onclick="get_onclick(6)" >Jul</a>
                <a  href="#" onclick="get_onclick(7)" >Aug</a>
                <a  href="#" onclick="get_onclick(8)" >Sep</a>
                <a  href="#" onclick="get_onclick(9)" >Oct</a>
                <a  href="#" onclick="get_onclick(10)" >Nov</a>
                <a  href="#" onclick="get_onclick(11)" >Dec</a>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <script>
         let mydiv=document.getElementById('main');
        
        get_onclick = (number) => 
        {
          
        document.getElementById("month").innerHTML =mydiv.children[number].textContent;
        }
    </script>
    
    </body>
    
    </html>

Upvotes: 0

Aalexander
Aalexander

Reputation: 5004

this

Inside the myFunction you can change the textContent of the button by the clicked elements textContent using this.

document.querySelector('.dropbtn').textContent = this.textContent;

event listeners

Instead of using the inline scripting I would recommend using eventListeners for your buttons

.addEventListener('click', myFunction);


// add an event listener to all of your <a> elements
document.querySelectorAll('.option').forEach((x) => {
  x.addEventListener('click', myFunction);
});

function myFunction() {
  document.getElementById('month').textContent = this.textContent;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown-content a:hover {
      background-color: #ddd;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .dropdown:hover .dropbtn {
      background-color: #3e8e41;
    }
    
    .force-scroll {
      overflow-y: scroll;
      height: 200px;
    }
  </style>
</head>
<script>
</script>

<body>
  <table style="width:25%">
    <tr>
      <td valign="top">
        <h3 id="total">Orders for</h3>
      </td>
      <td>
        <div class="dropdown force-scroll">
          <button id="month" class="dropbtn">Jan</button>
          <div class="dropdown-content">
            <a class="option" href="#">Jan</a>
            <a class="option" href="#">Feb</a>
            <a class="option" href="#">Mar</a>
            <a class="option" href="#">Apr</a>
            <a class="option" href="#">May</a>
            <a class="option" href="#">Jun</a>
            <a class="option" href="#">Jul</a>
            <a class="option" href="#">Aug</a>
            <a class="option" href="#">Sep</a>
            <a class="option" href="#">Oct</a>
            <a class="option" href="#">Nov</a>
            <a class="option" href="#">Dec</a>
          </div>
        </div>
      </td>
    </tr>
  </table>
</body>

</html>

Upvotes: 1

Related Questions