javascript - 根据 HTML 中的选项标签，以不同的语言显示星期几

Question

我正在尝试以 HTML 显示一周中的几天，以不同的语言显示，具体取决于所选的语言选项，然后按“计算”按钮，应该在标签标签内的右侧显示日期.但这并不完全按照计划进行......

在 Internet 上查找了很长时间，提出了一些对我有帮助的东西，但不完全是 100%...

<form style="margin-bottom: 30px;">
    <label>Select language:</label>
    <select class="lang">
       <option value="en">En</option>
       <option value="ro">Ro</option>
       <option value="fr">Fr</option>
    </select>
    <label class="showDays"></label>
    <br>
    <button type="button" onClick="displayLang()">Compute</button>
    <button type="reset" onClick="resetLang()">Reset</button>
</form>



window.displayLang = function()  {

    let date = new Date();
    date.setDate(date.getDate() + 7);
    let days = date.getDay();

    let week = [];

    let lang = document.getElementsByClassName("lang")[0].value;
    let allDays = document.getElementsByClassName("showDays");

    if(lang[0].value = "en")    {

        week.push(days);

        allDays[0].innerHTML = week;

    }

    if(lang[0].value = "ro")  {

        week.splice(0, 0, "Luni", "Marti", "Miercuri", "Joi", "Vineri", "Sambata", "Duminica");

        allDays[0].innerHTML = week;

    }

    if(lang[0].value = "fr")    {

        week.splice(0, 0, "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche");

        allDays[0].innerHTML = week;

    }

}

window.resetLang = function()    {
    document.getElementsByClassName("showDays")[0].innerHTML = "";
}

显然，如果我选择“En”选项，日期应该以英文显示，如果我选择“Ro”选项，日期应该以罗马尼亚语显示，如果我选择“Fr”选项，日期应该显示为以法语显示。相反，我现在得到的是:Lundi,Mardi,Mercredi,Jeudi,Vendredi,Samedi,Dimanche,Luni,Marti,Miercuri,Joi,Vineri,Sambata,Duminica,3/////我只是不明白“3”是从哪里来的……我不是在这里追求数字!显然我也可以使用 JavaScript 中的 switch case 来解决这个问题……我只是不知道我该怎么做……

Answer 1

1. 您必须在条件 if 中使用双等号 == 而不是一个 =。

2. 您还需要添加 else 语句。

3. 您需要将 lang[0].value 改为 lang。

window.displayLang = function() {
  let date = new Date();
  date.setDate(date.getDate() + 7);
  let days = date.getDay();
  let week = [];
  let lang = document.getElementsByClassName("lang")[0].value;
  let allDays = document.getElementsByClassName("showDays");

  if (lang == "en") {
    week = ["Monday", "Tuesday", "Thursday", "Wednesday", "Friday", "Saturday", "Sunday"].join(', ');
    allDays[0].innerHTML = week;
  } else if (lang == "ro") {
    week= ["Luni", "Marti", "Miercuri", "Joi", "Vineri", "Sambata", "Duminica"].join(', ');
    allDays[0].innerHTML = week;
  } else if (lang == "fr") {
    week = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"].join(', ');
    allDays[0].innerHTML = week;
  }
}

window.resetLang = function() {
  document.getElementsByClassName("showDays")[0].innerHTML = "";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="margin-bottom: 30px;">
  <label>Select language:</label>
  <select class="lang">
    <option value="en">En</option>
    <option value="ro">Ro</option>
    <option value="fr">Fr</option>
  </select>
  <br>
  <label class="showDays"></label>
  <br>
  <button type="button" onClick="displayLang()">Compute</button>
  <button type="reset" onClick="resetLang()">Reset</button>
</form>