我基本上想做的是拆分用户给定的字符串，并将其放在文本区域中。然而，问题是，每次我单击转换按钮时，输入字段和文本区域都会被清除。 不要介意额外的声明。
这是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/