英文:
Changing Option Value Of Another Element With Javascript When Another Select Element's Option Is Changed
问题
I have translated the provided code snippet into Chinese:
我正在尝试创建一个基本的翻译器，其中脚本将在土耳其语和英语之间进行翻译，但在我尝试创建程序时，我遇到了一个问题。我有2个选择元素。
当具有id“languages”的选择元素的选项为英语时，我希望具有id“languagesT”的选择元素为土耳其语，当我在“languages”中选择土耳其语时，也是如此。因此，基本上我希望它们相反，这是我到目前为止使用JavaScript所做的：
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
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";
}
}
);
<!-- 语言: lang-html -->
<select name="languages" id="languages">
<option value="english">英语</option>
<option value="turkish">土耳其语</option>
</select>
<select name="languagesT" id="languagesT">
<option value="turkish">土耳其语</option>
<option value="english">英语</option>
</select>
<!-- 结束代码片段 -->
请注意，这是您提供的代码的翻译部分。
英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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";
}
}
);
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 0
你可以修正你的拼写或委托
这里我们不关心语言是什么
<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>
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;
});
});
英文:
You could fix your spelling or delegate
Here we do not care what the languages are
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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;
});
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: -1
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="english">English</option>
</select>
it should be
<select name="languagesT" id="languagesT">
<option value="turkish">Turkish</option>
<option value="english">English</option>
</select>
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论