0

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

在这一点上我即将放弃，如果有人可以提供帮助，我将不胜感激。

4

3 回答 3

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>

于 2016-04-03T01:08:30.360 回答
0

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

于 2016-04-03T01:10:02.983 回答
0

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

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>

于 2016-04-03T01:11:06.847 回答