問題：Javascript的更改函數無效

Question

<p>我在使用 JavaScript 更改文字翻譯時遇到問題。</p> <p>這是html代碼</p> <p>

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

函數changeFunc() {
  var selectBox = document.getElementById("language_select");
  var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  // 警報（選定值）；
  if (selectedValue == 'id') {
    document.getElementById('slider-en1').style.visibility = '可見';
    document.getElementById('slider-id1').style.visibility = '隱藏';
  }
  if (selectedValue == 'en') {
    document.getElementById('slider-en1').style.visibility = '可見';
    document.getElementById('slider-id1').style.visibility = '隱藏';
  }
}</pre>
<pre class="brush:html;toolbar:false;"><select class="nav-item has-sub-menu language-selector" id="language_select" onchange="changeFunc();">
  

    <li class="nav-item 子選單項目">
      <選項類別=「導覽連結子選單連結文字白色」停用預設選取值=「」>語言
    </li>
    <li class="nav-item 子選單項目">
      印尼
    </li>
    <li class="nav-item 子選單項目">
      英文;
    </li>
  </ul>
</選擇>


<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-id1">
  <p class="slide-subtitle slim-centerd-text">
    印尼 印尼 印尼
  </p>

Answer 1

UL LI不是select的有效子元素。

然而，我簡化了您的程式碼以提高效率。

我為每個語言div新增了一個data屬性。此屬性保存表示內容的語言值。我還創建了一個名為"active"的css類，它將顯示適當的語言div，並將語言div預設為隱藏。

然後，我使用事件處理程序而不是內聯事件（onchange），這是更好的方法，也將幫助您在將來做更多事情。

在我的事件監聽器中，我只是取得所選值。然後，我查看是否有任何帶有active類別的語言div，如果有，則刪除它。然後，我找到並將active類別新增到適當的語言div。

這個過程將幫助您擴展程式碼，因為您不需要關心if語句。

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>