Pig Latin Translator не будет писать результаты?

I’m trying to write a pig latin translator, but my webpage keeps displaying undefined, and it can’t read from the textarea. The html looks okay, but the text from the textarea that the end user needs inputs is not displayed correctly. I tried changing the textarea’s text by using .textContent, value, and many others. 

var textarea = document.getElementById("piglatin");
var button = document.getElementById("click_to_translate");
var translation = document.getElementById("translation");
var toPigLatin = function(str){
    str=str.replace(/([^aeiou]*)([aeiou])(\w+)/, "$2$3$1ay");
};
button.onclick = function(){
    translation.innerHTML = toPigLatin(textarea.textContent);
};
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <script src="pig_latin.js"></script>
    </head>
    
    <body>
        <div id="wrapper">
            <h1 id="translation">
                PigLatin Translator!
            </h1>
            <textarea rows="1" cols="30" id="piglatin"></textarea>
            <button type="button" id="click_to_translate">Translate</button>
        </div>
    </body>
    
</html>

Я собираюсь сдаться на этом этапе, и было бы признательно, если бы кто-то мог помочь.


javascript html latin
person phriol    schedule 03.04.2016    source источник
comment
textarea.value См. HTMLTextAreaElement.   -  person traktor    schedule 03.04.2016

Ответы (3)


arrow_upward
1
arrow_downward

Было две проблемы: Функция toPigLatin должна return дать соответствующий результат вместо установки str=.... Кроме того, значение текстовой области равно textarea.value.

var textarea = document.getElementById("piglatin");
var button = document.getElementById("click_to_translate");
var translation = document.getElementById("translation");
var toPigLatin = function(str){
    return str.replace(/([^aeiou]*)([aeiou])(\w+)/, "$2$3$1ay");
};
button.onclick = function(){
    translation.innerHTML = toPigLatin(textarea.value);
};
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <script src="pig_latin.js"></script>
    </head>
    
    <body>
        <div id="wrapper">
            <h1 id="translation">
                PigLatin Translator!
            </h1>
            <textarea rows="1" cols="30" id="piglatin"></textarea>
            <button type="button" id="click_to_translate">Translate</button>
        </div>
    </body>
    
</html>

person JCOC611    schedule 03.04.2016

arrow_upward
0
arrow_downward

Это потому, что ваша функция toPigLatin ничего не возвращает, она просто переназначает переменную, скопированную в параметр. Вместо этого используйте эту строку:

return str.replace(/([^aeiou]*)([aeiou])(\w+)/, "$2$3$1ay");

Кроме того, вы должны использовать textarea.value.

var textarea = document.getElementById("piglatin");
var button = document.getElementById("click_to_translate");
var translation = document.getElementById("translation");
var toPigLatin = function(str) {
  return str.replace(/([^aeiou]*)([aeiou])(\w+)/, "$2$3$1ay");
};
button.onclick = function() {
  translation.innerHTML = toPigLatin(textarea.value);
};
<div id="wrapper">
  <h1 id="translation">
                PigLatin Translator!
            </h1>
  <textarea rows="1" cols="30" id="piglatin"></textarea>
  <button type="button" id="click_to_translate">Translate</button>
</div>

person 4castle    schedule 03.04.2016

arrow_upward
0
arrow_downward

Это потому, что если вы пройдете через это, ваше

textarea.textContent

Это не то значение, которое вам нужно textarea.value вместо этого

Также вам нужно вернуть данные в вашу функцию.

var textarea = document.getElementById("piglatin");
var button = document.getElementById("click_to_translate");
var translation = document.getElementById("translation");
var toPigLatin = function(str){
    return str.replace(/([^aeiou]*)([aeiou])(\w+)/, "$2$3$1ay");
};
button.onclick = function(){
    translation.innerHTML = toPigLatin(textarea.value);
};
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <script src="pig_latin.js"></script>
    </head>
    
    <body>
        <div id="wrapper">
            <h1 id="translation">
                PigLatin Translator!
            </h1>
            <textarea rows="1" cols="30" id="piglatin"></textarea>
            <button type="button" id="click_to_translate">Translate</button>
        </div>
    </body>
    
</html>

person Josh Stevens    schedule 03.04.2016