Question

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

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>

我现在就要放弃了，如果有人可以提供帮助，我们将不胜感激。

Answer 1

有两个问题：函数TOPCODER QRSTUVWXYZABCDEFGHIJKLMNOP HELLOWORLD应该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);
};

Answer 2

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

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

此外，您必须使用textarea.value。

＆＃13;

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);
};

＆＃13;

<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>

＆＃13;

Answer 3

这是因为如果你单步执行它

textarea.textContent

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

您还需要在函数中返回数据。

＆＃13;

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);
};

＆＃13;

<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>

＆＃13;

Pig Latin Translator不会写结果吗？

3 个答案: