javascript - 如何修改javascript代码以接收用户的输入?

标签 javascript html json

我对我的语言翻译工具感到震惊。 这是谷歌翻译 API 的代码。 我必须修改此代码以在文本框中接收用户的输入,然后识别输入的语言。当前代码正在从 id="sourceText"获取值。 我需要在那里放置一个文本框,使其成为一个简单的动态工具。请告诉我应该进行哪些修改才能添加文本框并接收其输入并检测语言?谢谢...

   <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>

最佳答案

改变

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

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

同时更新此行:

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>

关于javascript - 如何修改javascript代码以接收用户的输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6962025/

相关文章:

javascript - 如何使用属性 contenteditable 设置 div 的最大值长度

javascript - 多维数组。推送然后加入

html - CSS div 相对于其他 div 的定位

javascript - VueJS/VueX 超出最大调用堆栈大小

javascript - Reveal.js 幻灯片无法正常工作

css - html5定位——aside, figure, section,

html - 父 div 中的两个 div 未占用 100% 高度

python - 正在附加 JSON 文件 : "TypeError: list indices must be integers or slices, not str"

Java : How to map the json string returned by Oauth2 service to model class object

java - 异构 JSON 数组无法用 jackson 解析