title: Having trouble converting Pig Latin JavaScript function to a GUI
body: <p>I'm stuck on this project of mine. I have a Pig Latin project that works in a console. But I'm trying to convert it to a GUI. I thought I could just use the function I already built and add an input field. But it's not working.</p>
  
  <p>Here's my JS.</p>
  
  <pre><code>const pigLatin = (word) =&gt; {
  
  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 &lt; myWord.length; i++) {
    newWord = newWord + myWord[i];
  }
  return newWord;
  } else {
  for (let i = 0; i &lt; 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])
  
     }
  
        }}}
  </code></pre>
  
  <p>My HTML</p>
  
  <pre><code> &lt;body&gt;
  &lt;h1&gt;Pig Latin Translator!&lt;/h1&gt;
  &lt;hr/&gt;
  &lt;div id="display-element"&gt;
  
    &lt;input id="translate" type="text" placeholder="Enter word here"&gt;
    &lt;button onclick="pigLatin()"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  &lt;hr/&gt;
  
  &lt;div id="output"&gt;
  &lt;/div&gt;
  
  
  &lt;script src="main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Right now I'm getting an error of :</p>
  
  <pre><code>   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
  </code></pre>
  
  <p>Am I close or do I need to start over?</p>