Changing Option Value Of Another Element With Javascript When Another Select Element's Option Is Changed

Question

I am trying to create a basic translator where the script will translate between Turkish and English, but while I was trying to create the program, I got stuck at a point. I have 2 select elements.

When the select element with the id of "languages" option is English I want the select element with the id of "languagesT" to be Turkish and the same when I select Turkish in languages. So basically I want them to be opposite, and this is what I have done so far with javascript:

const translating = document.getElementById("languages")
const translator = document.getElementById("languagesT")

translating.addEventListener("change", () => {
    if (translating.value === "turkish") {
      translator.value = "english";
    }
    else if (translating.value === "english") {
      translator.value = "turkish";
    }
  }
);

<select name="languages" id="languages">
    <option value="english">English</option>
    <option value="turkish">Turkish</option>
</select>
<select name="languagesT" id="languagesT">
    <option value="turkish">Turkish</option>
    <option value="english">English</option>
</select>

You could change it to a pair of radio buttons, one for Turkish -> English and one for English -> Turkish. Much friendlier than ` — Pointy, Jun 11 '23 at 17:19

score 0 · Accepted Answer · answered Jun 11 '23 at 17:19

You could fix your spelling or delegate

Here we do not care what the languages are

document.getElementById("languages").addEventListener("change", (e) => {
  const tgt = e.target;
  const value = tgt.value;
  e.currentTarget.querySelectorAll("select").forEach(sel => {
    if (tgt!==sel) sel.selectedIndex = tgt.selectedIndex === 0 ? 0 : 1;
  });  
});

<div id="languages">
<select name="language1" id="en_tr">
    <option value="english" selected>English</option>
    <option value="turkish">Turkish</option>
</select>
<select name="language2" id="tr_en">
    <option value="turkish"selected>Turkish</option>
    <option value="english">English</option>
</select>
</div>

score -1 · Answer 2 · answered Jun 11 '23 at 17:13

Your javascript code looks correct; there's a typo in your HTML code in the second option value of the second select element.

<select name="languagesT" id="languagesT">
    <option value="turkish">Turkish</option>
    <option value="englisih">English</option>
</select>

it should be

<select name="languagesT" id="languagesT">
    <option value="turkish">Turkish</option>
    <option value="english">English</option>
</select>

Changing Option Value Of Another Element With Javascript When Another Select Element's Option Is Changed

2 Answers2