javascript - 将Pig Latin JavaScript函数转换为GUI时遇到问题

我被困在我的这个项目上。我有一个在控制台中工作的Pig Latin项目。但是我正在尝试将其转换为GUI。我以为我可以使用已经构建的功能并添加一个输入字段。但这不起作用。

这是我的JS。

const pigLatin = (word) => {

document.getElementById("translate").value;


// Your code here
word = word.trim().toLowerCase();
const vowels = ['a', 'e', 'i', 'o', 'u'];
const myWord = word.split("");
let newWord = "";


if (vowels.includes(myWord[0])) {
myWord.push('yay');
for (let i = 0; i < myWord.length; i++) {
  newWord = newWord + myWord[i];
}
return newWord;
} else {
for (let i = 0; i < myWord.length; i++) {
  if ( (vowels.includes(myWord[i]))) {
    newWord = myWord.slice(i, myWord.length).concat(newWord).join('') + 'ay';
    return newWord;
   } else {
     newWord = newWord.concat(myWord[i])

   }

      }}}

我的HTML

 <body>
<h1>Pig Latin Translator!</h1>
<hr/>
<div id="display-element">

  <input id="translate" type="text" placeholder="Enter word here">
  <button onclick="pigLatin()">Submit</button>
</div>
<hr/>

<div id="output">
</div>


<script src="main.js"></script>

现在，我遇到了一个错误：

   Uncaught TypeError:

   Cannot read property 'trim' of undefined
    at pigLatin (main.js:24)
   at HTMLButtonElement.onclick (index.html:13)
       pigLatin @ main.js:24
        onclick @ index.html:13

我要关闭还是需要重新开始？

最佳答案

最简单的补丁：

-  <button onclick="pigLatin()">Submit</button>
+  <button onclick="document.getElementById('output').textContent=pigLatin(document.getElementById('translate').value)">Submit</button>

当然，这远不是“最佳实践”，但是我想这就是您所需要的，因为这是一个玩具项目，您只需要它与HTML界面一起使用即可。

通常，您会将两个控件放在一个表单中，并用submit或addEventHandler附加onsubmit事件处理程序，并在处理程序函数中获取控件值。

关于javascript - 将Pig Latin JavaScript函数转换为GUI时遇到问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59916056/

latin

javascript - 将Pig Latin JavaScript函数转换为GUI时遇到问题