Pig Latin Translator 不会写结果？

Question

我正在尝试编写一个猪拉丁语翻译器，但我的网页一直显示 undefined，并且无法从文本区域读取。 html 看起来没问题，但最终用户需要输入的文本区域中的文本显示不正确。我尝试使用 .textContent、value 和许多其他方法来更改文本区域的文本。

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+)/, "ay");
};
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>

我快要放弃了，如果有人能提供帮助，我将不胜感激。

Answer 1

有两个问题：函数 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+)/, "ay");
};
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>

Answer 2

这是因为你的 toPigLatin 函数没有 return 任何东西，它只是重新分配复制到参数的变量。请改用此行：

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

此外，您必须使用 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+)/, "ay");
};
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>

Answer 3

这是因为如果你逐步完成它，你的

textarea.textContent

不是你需要的值textarea.value而是

您还需要 return 函数中的数据。

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+)/, "ay");
};
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 不会写结果？

Pig Latin Translator won’t write results?

html

javascript

latin