0

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>
2
  • Questions about coding are considered off-topic on this site, and over at Stack Overflow they'll want to see what code you've tried (they don't like questions just asking for code). – dan Oct 7 '16 at 3:58
  • I'm sorry, i understand – aldausi Oct 7 '16 at 4:53
1

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.

1
  • Done sir, thankyou so much again. I'm sorry to ask you, but what do you mean by add some validations? Or what is a "validation"? I'm still really beginner in coding, and my English is not good, so i really appreciate your help. – aldausi Oct 7 '16 at 7:04

Not the answer you're looking for? Browse other questions tagged or ask your own question.