Pig Latin Translator won’t write results?

Question

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>

I’m about to give up at this point, and it would be appreciated if someone could help.

`textarea.value` See [HTMLTextAreaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement). — traktor, Apr 03 '16 at 01:09

score 1 · Accepted Answer · answered Apr 03 '16 at 01:08

There were two issues: The function toPigLatin should return the appropriate result, instead of setting str=.... Also, the value of a text area is 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>

score 0 · Answer 2 · answered Apr 03 '16 at 01:10

It's because your toPigLatin function doesn't return anything, it just reassigns the variable copied to the parameter. Use this line instead:

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

Also, you have to use 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>

score 0 · Answer 3 · answered Apr 03 '16 at 01:11

It is because if you step through it your

textarea.textContent

Is not the value you need textarea.value instead

Also you need to return the data in your function.

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>

Pig Latin Translator won’t write results?

3 Answers3