Возникли проблемы при преобразовании функции Pig Latin JavaScript в GUI - PullRequest
Новая
       0

Возникли проблемы при преобразовании функции Pig Latin JavaScript в GUI

0 голосов
/ 26 января 2020

Я застрял на этом моем проекте. У меня есть проект 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

Я близок или мне нужно начать все сначала?

Ответы [ 2 ]

1 голос
/ 26 января 2020

Самый простой из возможных патчей: 

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

Это, конечно, далеко не «лучшая практика», но я полагаю, это то, что вам нужно, поскольку это игрушечный проект, и вам просто нужно, чтобы он работал с вашим HTML interface.

Обычно вы помещаете два элемента управления в форму и присоединяете обработчик события submit с помощью addEventHandler или onsubmit и получаете значения элемента управления в функции обработчика.

0 голосов
/ 26 января 2020

Вы очень близки. Только незначительные ошибки в вашем коде.

Вы не передаете какой-либо параметр в вашу функцию pigLatin из вашей разметки (HTML). В вашей разметке у вас есть функция pigLatin() без параметра (word), но вам требуется параметр в JavaScript pigLatin(word). Вот почему, когда JavaScript пытается выполнить word.trim(), word не определено и, следовательно, оно говорит Я не могу выполнить метод trim для значения undefined` .

Итак, это то, что вы должны сделать.

  1. В вашем JavaScript удалите параметр word для функции pigLatin (потому что вы на самом деле ничего не передаете ему из своей разметки ).
  2. Установите word на document.getElementById("translate").value;, выполнив это

let word = document.getElementById("translate").value;

Это позволит получить значение того, что вы ввели в поле ввода и передайте его word

С вами все в порядке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...