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

Question

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.









 
        
            
                Orders for
        
       

  
  
    Jan
    Feb
    Mar
    Apr
    May
    Jun
    Jul
    Aug
    Sep
    Oct
    Nov
    Dec

user_14747039 · Answer

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  elements
document.querySelectorAll('.option').forEach((x) => {
  x.addEventListener('click', myFunction);
});

function myFunction() {
  document.getElementById('month').textContent = this.textContent;
}

user_15131060 · Answer

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

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

2 Answers

this

event listeners