Question 43043 in Html Question posted in
Some basic documentation can be found here.

Bad : Javascript change function not working – Html

i have a problem on changing text translation using javascript.

Here is html code

document.getElementById('slider-en1').style.visibility = 'hidden';
document.getElementById('slider-id1').style.visibility = 'visible';

function changeFunc() {
  var selectBox = document.getElementById("language_select");
  var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  // alert(selectedValue);
  if (selectedValue == 'id') {
    document.getElementById('slider-en1').style.visibility = 'visible';
    document.getElementById('slider-id1').style.visibility = 'hidden';
  }
  if (selectedValue == 'en') {
    document.getElementById('slider-en1').style.visibility = 'visible';
    document.getElementById('slider-id1').style.visibility = 'hidden';
  }
}
<select class="nav-item has-sub-menu language-selector" id="language_select" onchange="changeFunc();">
  <ul class="sub-menu">
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-white" disabled default selected value="">Language</option>
    </li>
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-dark" id="id" value="id">Indonesia</option>
    </li>
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-dark" id="en" value="en">English</option>
    </li>
  </ul>
</select>


<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-id1">
  <p class="slide-subtitle narrow-centerd-text">
    indonesia indonesia indonesia
  </p>
</div>
<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-en1">
  <p class="slide-subtitle narrow-centerd-text">
    en en en
  </p>
</div>

I’ve tried to use jquery but it still not working. Thanks for the answer

I’ve trying to show & hide the content using javascript but my code is not working

Tags:

3

Answers


  1. 0

    You have the same logic for both the "id" and "en" conditions. Need to swap the hidden/visible values inside your if (selectedValue == 'id') condition.

    Could simplify this code quite a bit, but if you’d like to keep using this method then you can just swap those values.

    document.getElementById('slider-en1').style.visibility = 'hidden';
document.getElementById('slider-id1').style.visibility = 'visible';

function changeFunc() {
  var selectBox = document.getElementById("language_select");
  var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  // alert(selectedValue);
  if (selectedValue == 'id') {
    document.getElementById('slider-en1').style.visibility = 'hidden';
    document.getElementById('slider-id1').style.visibility = 'visible';
  }
  if (selectedValue == 'en') {
    document.getElementById('slider-en1').style.visibility = 'visible';
    document.getElementById('slider-id1').style.visibility = 'hidden';
  }
}
    <select class="nav-item has-sub-menu language-selector" id="language_select" onchange="changeFunc();">
  <ul class="sub-menu">
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-white" disabled default selected value="">Language</option>
    </li>
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-dark" id="id" value="id">Indonesia</option>
    </li>
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-dark" id="en" value="en">English</option>
    </li>
  </ul>
</select>


<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-id1">
  <p class="slide-subtitle narrow-centerd-text">
    indonesia indonesia indonesia
  </p>
</div>
<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-en1">
  <p class="slide-subtitle narrow-centerd-text">
    en en en
  </p>
</div>
    Login or Signup to reply.
  2. 0

    UL LI are not valid children of a select.

    However, I simplified your code to be more effective.

    I added a data attribute to each language div. This attribute holds the language value that represents the content. I also created a css class called "active" that will show the appropriate language div and I defaulted the language divs to hidden.

    Then instead of an inline event (onchange) I’m using an event handler, which is the better method and will help you do more in the future also.

    In my event listener, I simply grab the selected value. Then I see if any language divs have the active class, if so remove it. Then I find and add the active class to the appropriate language div.

    This process will help you scale your code as you won’t need to care about if statements.

    let langSelect = document.querySelector("#language_select");

langSelect.addEventListener("change",(e) => {
   let shown = document.querySelector(".active[data-lang]");
   if(shown)shown.classList.remove("active");
   document.querySelector(`[data-lang='${langSelect.value}']`).classList.add("active")
});
    [data-lang]{visibility:hidden}
.active[data-lang]{visibility:visible;}
    <select class="nav-item has-sub-menu language-selector" id="language_select">
      <option disabled selected value="">Language</option>
      <option value="id">Indonesia</option>
      <option value="en">English</option>
</select>


<div class="col-9 col-md-10 col-lg-8 mx-auto active" data-lang="id" id="slider-id1">
  <p class="slide-subtitle narrow-centerd-text">
    indonesia indonesia indonesia
  </p>
</div>
<div class="col-9 col-md-10 col-lg-8 mx-auto" data-lang="en" id="slider-en1">
  <p class="slide-subtitle narrow-centerd-text">
    en en en
  </p>
</div>
    Login or Signup to reply.
  3. 0

    You have given same condition for both the if statements:

     if (selectedValue == 'id') {
            document.getElementById('slider-en1').style.visibility = 'visible';
            document.getElementById('slider-id1').style.visibility = 'hidden';
        }
        if (selectedValue == 'en') {
            document.getElementById('slider-en1').style.visibility = 'visible';
            document.getElementById('slider-id1').style.visibility = 'hidden';
        }
    }

    Maybe you have to change them and it may work…
    Happy to help you…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search