How to modify the javascript code to receive input from the user?

Question

I am struck with my language translation tool . Here is the code that google translate API has . I have to modify this code to receive input from the user in a text box and then identify the language it is typed in. Currently the code is picking up the values from id="sourceText" . I need to put in a text box there to make it a simple dynamic tool . Please tell me what modifications should be made to add a text box and receive its input and detect the language ? Thanks...

   <html>
   <head>
   <title>Translate API Example</title>
   </head>
   <body>
  <div id="sourceText">Hello world</div>
<div id="translation"></div>
<script>
  function translateText(response) { 
    document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
  }
</script>
<script>
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  var sourceText = escape(document.getElementById("sourceText").innerHTML);
  var source = 'https://www.googleapis.com/language/translate/v2/detect?key=INSERT-YOUR-KEY&source=en&target=de&callback=translateText&q=' + sourceText;
  newScript.src = source;

  // When we add this script to the head, the request is sent off.
  document.getElementsByTagName('head')[0].appendChild(newScript);
  </script>
  </body>
  </html>

js1568 · Accepted Answer · 2011-08-05 20:35:29Z

2

Change

<div id="sourceText">Hello world</div>

to

<textarea id="sourceText">Hello World</textarea>

Also update this line:

var sourceText = escape(document.getElementById("sourceText").value);

   <html>
   <head>
   <title>Translate API Example</title>
   </head>
   <body>
  <textarea id="sourceText">Hello world</textarea>
  <input type="button" value="Translate" onclick="submit()" />
<div id="translation"></div>
<script>
  function translateText(response) { 
    document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
  }

 function submit() {
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  var sourceText = escape(document.getElementById("sourceText").innerHTML);
  var source = 'https://www.googleapis.com/language/translate/v2/detect?key=INSERT-YOUR-KEY&source=en&target=de&callback=translateText&q=' + sourceText;
  newScript.src = source;

  // When we add this script to the head, the request is sent off.
  document.getElementsByTagName('head')[0].appendChild(newScript);
 }
  </script>
  </body>
  </html>

edited Aug 5, 2011 at 20:35

answered Aug 5, 2011 at 20:13

js1568

7,0322 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

abhinav singh Over a year ago

Got this point..Thnks. Now how shold I code a button to submit my text area value and invoke appropriate function .. Please guide .. Thanks

js1568 Over a year ago

Wrap the javascript in a function called submit() and add <input type="button" onclick="submit()" />

abhinav singh Over a year ago

Please help me with wrapping up the js functions ..Tried but failed(i am still a beginner) Cant we use the translateText(response) function in onclick ? Thanks alot for your responses.

mkk · Accepted Answer · 2011-08-05 20:15:45Z

0

How about changing

  <div id='mySource'>

into

  <textarea id='mySource'>

and put the code responsible for translation into function, and add a button "trasnalte", which onclick event would launch translating function?

answered Aug 5, 2011 at 20:15

mkk

7,7037 gold badges48 silver badges63 bronze badges

Collectives™ on Stack Overflow

How to modify the javascript code to receive input from the user?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related