我基本上想做的是，将用户给定的字符串拆分为一个字符串，并将其放置在文本区域中。但是问题是，每次我单击转换按钮时，输入字段和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;
}
谢谢。
最佳答案
您有一个表单，并且内部有一个按钮，表单中的按钮默认情况下被视为“提交”按钮，因此，当您单击提交的表单并且页面刷新时，将清除这些字段。
我建议将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>希望这可以帮助。
关于javascript - 为什么数组未显示在文本区域中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33222406/