" button," /> Mobile app version of vmapp.org
Login or Join
Looi9037786

: Exchange value between two dropdown boxes html I'm building a dictionary web. Like every dictionary app, we choose two languages from two drop down boxes. And if we click the "<->" button,

@Looi9037786

Posted in: #Html #Html5 #Javascript #WebApplications #WebDevelopment

I'm building a dictionary web. Like every dictionary app, we choose two languages from two drop down boxes. And if we click the "<->" button, two chosen languages will exchange side. For example, if we choose from Chinese to English and click the "<->", it will become from English to Chinese. How to write code for this "<->" button? Here is my html code, please help me, thankyou.



<!DOCTYPE html>
<html lang="en">
<head>
<div align="center">
<h1>TRANSLATOR</h1>
<p>By AldaYao</p>
<br>
<br>
</div>
</head>
<body>
<div align="center">
<div align ="center" style="width:500px;height:500px;padding:10px;border:10px solid yellowgreen;">

<br>
<select name="languages1" id="languages1">
<option selected value="">Choose Language</option>
<option value="Indonesia">Indonesia</option>
<option value="English">English</option>
<option value="Chinese">Chinese</option>
</select>

<input type="button" id="exchange" value="<->" onclick="OnButtonClick();">

<select name="languages2" id="languages2">
<option selected value="">Choose Language</option>
<option value="Indonesia">Indonesia</option>
<option value="English">English</option>
<option value="Chinese">Chinese</option>
</select>


<br>
<br>
<br>


<input style="border:none; text-align:center" type="text" id="txtname1" name="txtname1" value="From:" readonly>
<br>
<textarea style="overflow:hidden" name="from" rows="5" cols="50"></textarea>
<br>
<br>
<input type="button" value="Translate">
<br>
<br>

<input style="border:none; text-align:center" type="text" id="txtname2" name="txtname2" value="To:" readonly>
<br>
<textarea style="overflow:hidden" name="to" rows="5" cols="50" readonly></textarea>


</div></div>


<script type="text/javascript">


// script for left side language
var select = document.getElementById('languages1'),
input = document.getElementById('txtname1');

select.onchange = function() {
input.value = "From " + select.value + ":";
}


// script for right side language
var select2 = document.getElementById('languages2'),
input2 = document.getElementById('txtname2');

select2.onchange = function() {
input2.value = "To " + select2.value + ":";
}

//exchange button
function OnButtonClick() {
//??
}

</script>
</body>
</html>

10.01% popularity Vote Up Vote Down

Login to follow query

More posts by @Looi9037786

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

 

@Phylliss660

Here is your updated function.

function OnButtonClick() {

// Save the value of the first one for future reference
var select1alueTemp = select.options[select.selectedIndex].value;
// Find the second list selected value and assign it to the first one
select.value = select2.options[select2.selectedIndex].value;
// Then assign your previously saved value to select2
select2.value = select1alueTemp;

}


You should add some validations as well if this is going to be on production.

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme