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

Question

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:

NickG · Answer 1 · 2022-02-24T08:33:18.733

0

Use btn1.innerHtml or btn1.innerText instead of btn1.value. As you are using buttons, the text is actually not the value, but a child node. If you were using <input type="button"/> your code would work aswell, as on input buttons the value is used as text.

I am kind of confused why you added if (btn2.onclick) { to your code. You don't have an eventlistener for your btn2. Therefore that query will always be false (and text not changed), as btn2.onclick is undefined.

edited Feb 24 '22 at 08:33

answered Feb 24 '22 at 08:27

NickG

550
4
18

Thank you for telling me about the event listener because I'm a bit new to JavaScript and I am still learning. I will look through the tutorial and try it again! – Lim Chin Hong Feb 24 '22 at 12:57

Crystal · Accepted Answer · 2022-02-25T06:26:58.383

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>

Erm I had try this before but I think the option is hard to style so I use button instead of this :( — Lim Chin Hong, Feb 24 '22 at 12:50
I updated the code for you and it works the way you want it. and you can design it as much as you want. Hope this helps you — Crystal, Feb 25 '22 at 06:32
Alright, I will try over that, thank you very much for your help! — Lim Chin Hong, Feb 26 '22 at 10:02

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

2 Answers2