Pig Latin Translator 不会写结果？答案

【问题标题】：Pig Latin Translator won’t write results?Pig Latin Translator 不会写结果？
【发布时间】：2016-04-03 01:01:35
【问题描述】：

我正在尝试编写一个猪拉丁语翻译器，但我的网页一直显示undefined，并且无法从 textarea 读取。 html 看起来不错，但最终用户需要输入的 textarea 中的文本显示不正确。我尝试使用.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+)/, "$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>

此时我即将放弃，如果有人可以提供帮助，我将不胜感激。

【问题讨论】：

textarea.value 见HTMLTextAreaElement。

标签： javascript html latin

【解决方案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+)/, "$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>

【讨论】：

【解决方案2】：

这是因为您的 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>

【讨论】：

【解决方案3】：

这是因为如果你一步一步通过它你的

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>

【讨论】：