How to change the button name in a dropdown button list to replace the very first one button

I am currently doing a dropdown button and I would like to change the button text to the certain one when user click on it for example when user click on English, the very first button will change to the text English and so on. I have try the method below but it didn't works.

Below is my HTML code:

       <div class="dropdown">
          <button
            onclick="myFunction();hideBorder();change()"
            class="dropbtn"
            id="chi"
          >
            CHINESE
          </button>
          <div id="myDropdown" class="dropdown-content">
            <button id="eng">ENGLISH</button>
            <button id="fre">FRENCH</button>
            <button id="ger">GERMAN</button>
            <button id="ita">ITALIAN</button>
            <button id="mal">MALAY</button>
            <button id="spa">SPANISH</button>
          </div>
        </div>

Below is my JavaScript code:

function change() {
  var btn1 = document.getElementById("chi");
  var btn2 = document.getElementById("eng");
  if (btn2.onclick) {
    btn1.value = "ENGLISH";
  }
}

This is the example of my dropdown button:

Solution

I made this for you. hopethis is what you are looking at

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".dropdown-content").slideToggle();
  });

$(".option").click(function(){
    $(".dropdown-content").slideToggle();
  });
  
$("#chi").click(function(){
    $("button").html('CHINESE');
  });

$("#eng").click(function(){
    $("button").html('ENGLISH');
  });

$("#fre").click(function(){
    $("button").html('FRENCH');
  });
  
$("#ger").click(function(){
    $("button").html('GERMAN');
  });
  
$("#ita").click(function(){
    $("button").html('ITALIAN');
  });
$("#mal").click(function(){
    $("button").html('MALAY');
  });

$("#spa").click(function(){
    $("button").html('SPANISH');
  });
 });
</script>

</head>
<style>
button.language {
  background-color:white;
  width:110px;
  height:auto;
  border:2px solid lightblue;
  border-radius:10px;
  padding:5px;
  font-size:16px;
  font-weight:bold;
  }
  
.dropdown-content {
  width:110px;
  height:auto;
  border:2px solid lightblue;
  padding:5px 0px;
  color:black;
  font-weight:bold;
  font-size:16px;
  border-radius:10px;
  cursor:pointer;
  display:none;
  border-top:0px solid lightblue;
  }
  
.option {padding:10px;}
.option:hover {background-color:lightblue;}

</style>
<body>
<div class="dropdown">
    <button class="language" value="CHINESE">CHINESE</button>
          <div id="myDropdown" class="dropdown-content">
            <div class="option" id="chi" value="CHINESE">CHINESE</div>
            <div class="option" id="eng" value="ENGLISH">ENGLISH</div>
            <div class="option" id="fre" value="FRENCH">FRENCH</div>
            <div class="option" id="ger" value="GERMAN">GERMAN</div>
            <div class="option" id="ita" value="ITALIAN">ITALIAN</div>
            <div class="option" id="mal" value="MALAY">MALAY</div>
            <div class="option" id="spa" value="SPANISH">SPANISH</div>
          </div>
        </div>

</body>
</html>

.dropdown-content {width:150px;}

<div class="dropdown">

          <select id="myDropdown" class="dropdown-content">
            <option id="chi">CHINESE</option>
            <option id="eng">ENGLISH</option>
            <option id="fre">FRENCH</option>
            <option id="ger">GERMAN</option>
            <option id="ita">ITALIAN</option>
            <option id="mal">MALAY</option>
            <option id="spa">SPANISH</option>
          </select>
        </div>

I'm assuming you want something like this.

.dropdown-content {width:150px;}

     <div class="dropdown">

          <select id="myDropdown" class="dropdown-content">
            <option id="chi">CHINESE</option>
            <option id="eng">ENGLISH</option>
            <option id="fre">FRENCH</option>
            <option id="ger">GERMAN</option>
            <option id="ita">ITALIAN</option>
            <option id="mal">MALAY</option>
            <option id="spa">SPANISH</option>
          </select>
        </div>