Question

我基本上尝试做的是将用户分配给我的字符串拆分，并将其放在textarea中。但问题是，每次单击转换按钮时，输入字段和textarea都会被清除。别介意其他陈述。

这是html代码

<html>

<head>
    <title>Latin Converter</title>
    <meta charset="utf-8" />
    <script src="p14.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <form>
        <div>
            <table>
                <tr>
                    <td>Enter a sentence:</td>
                    <td>
                        <input type="text" size="40" id="userinput" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <button id="convert">Convert to Pig Latin</button>
                    </td>
                </tr>
                <tr>
                    <td>Converter</td>
                    <td>
                        <textarea id="result" cols="40" rows="20"></textarea>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>

</html>

这是我的js代码：

window.onload = function () {
    var convertArray = document.getElementById("convert");
    convertArray.addEventListener('click', printLatinWord);
};

function printLatinWord() {
        var input = document.getElementById("userinput").value;
        var array = input.split(" ");
        var firstChar = array.shift();
        array.push(firstChar);
        document.getElementById("result").value = array;
}

谢谢。

Answer 1

你有一个表单和里面的按钮，表单内的按钮默认被认为是提交按钮，所以当你点击提交的表单并刷新页面以便清除字段时。

我建议将type='button'添加到button，如下所示：

<button type='button' id="convert">

window.onload = function () {
    var convertArray = document.getElementById("convert");
    convertArray.addEventListener('click', printLatinWord);
};

function printLatinWord() {
        var input = document.getElementById("userinput").value;
        var array = input.split(" ");
        var firstChar = array.shift();
        array.push(firstChar);
        document.getElementById("result").value = array;
}

<form>
        <div>
            <table>
                <tr>
                    <td>Enter a sentence:</td>
                    <td>
                        <input type="text" size="40" id="userinput" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <button type='button' id="convert">Convert to Pig Latin</button>
                    </td>
                </tr>
                <tr>
                    <td>Converter</td>
                    <td>
                        <textarea id="result" cols="40" rows="20"></textarea>
                    </td>
                </tr>
            </table>
        </div>
    </form>

希望这有帮助。

为什么不在textarea中显示数组？

1 个答案: