我正在处理一个表单,在该表单中,我添加了第二个输出字段,在第二个字段中,它具有不同的格式,我在代码中列出了一个示例。现在,我已经部分工作了,但是两个问题出现了。
-
首先,它首先在输出字段中返回[对象htmltextareelement]响应,而不是我想要的输出。我无法弄清楚为什么它首先不断添加[对象htmltextareelement]。
-
第二,除了[对象htmltextarealeyment],我第一次使用表单,它确实有效。但是,当我使用"重置"按钮时,它实际上似乎并没有从第一个字段中"清除"输出,因为尽管重置了,但它似乎记住了前一次输入的任何内容。我确实需要第二个输出字段进行编码,除非在重置之前没有返回输入的信息。我希望这是有道理的。
-
最后,有什么方法可以让一个按钮输出两个输出框的结果?如果我必须使用两个按钮,那不是世界的尽头,但是如果我可以将它们合并为一个按钮,那就太好了。当我拥有它的设置时,我知道我已经从第一个输出中抓住了输入的文本,而不是将其转换为第二个输出。所以也许这不是一个超级简单的修复。
另外,请不要修复jQuery,只有JavaScript和HTML。我想要单页上的所有代码。请有人帮助,我一直陷入困境了几个小时,我没有尝试修复它。
这是我的html
<table width="100%" height="700" border=0>
<tr>
<td width=550 valign=top>
<form name="Form1" onsubmit="return false;" action="">
Name:
<br>
<input type="text" name="Name" id="name" placeholder="Name"><br>
Number:
<br>
<input type="text" name="Number" id="number" placeholder="Number"><br>
Question:
<br>
<input type="text" name="Question1" id="questionOne" placeholder="Answer">
<br>
Question:
<br>
<select type="drop" name="Question2" id="questionTwo">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select><br>
Enter some text?
<br>
<textarea type="textarea" name="Sometext" id="someText" placeholder="Type
something"
cols="70" rows="3"></textarea><br>
Question:
<br>
<select type="drop" name="Question3" id="questionThree">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option></select>
<br>
Question:
<br>
<select type="drop" name="Question4" id="questionFour">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option></select>
<br>
Enter more text:<br>
<textarea type="textarea" name="Story" id="story" placeholder="Type me a
story"
cols="70" rows="10"></textarea>
<br>
</td>
<td valign="top">
<table border=0 height=100% ><tr><td valign="top" height=410>
<textarea type="textarea" name="output" onclick="this.focus();this.select()"
id="output" cols="70" rows="25" placeholder="Name:
Number:
Answer:
Answer:

Some text:

Answer:

Answer:

A little story:"></textarea>
<br>
</td>
</tr>
<tr>
<td valign=top>
<div class="btn-group">
<button value="Combine" onclick="convert()" id="combine1">
Combine
</button><br><br>
</div>
<textarea type="textarea" id="secondOutput" name="output"
onclick="this.focus();this.select()" cols="70" rows="15" placeholder="Three
Lines
Down
Name:
Number:
Answer:
Answer:
Some text:
Answer:
Answer:
A little story:"></textarea>
<div class="btn-group">
<button value="Combine" onclick="NoteStart()" id="combine1">
Second copy
</button><br><br>
</div>
</td>
</tr>
<tr>
<td align="right">
<table width=25% height=100% border=0>
<tr>
<td valign="bottom">
<div class="btn-group">
<button type="reset" value="Reset form">
Reset form
</button> <br><br>
</div>
</form></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
是的,我知道,桌子,对不起...
和脚本
<script>
function wordwrap(str, width, brk, cut) {
brk = brk || 'n';
width = width || 60;
cut = cut || false;
if (!str)
return str;
var regex = '.{1,' +width+ '}(\s|$)' + (cut ? '|.{' +width+ '}|.+$' :
'|\S+?(\s|$)');
return str.match( RegExp(regex, 'g') ).join(brk);
}
function convert() {
var name = document.getElementById("name").value;
var number = document.getElementById("number").value;
var questionOne = document.getElementById("questionOne").value;
var questionTwo = document.getElementById("questionTwo").value;
var someText = document.getElementById("someText").value;
var questionThree = document.getElementById("questionThree").value;
var questionFour = document.getElementById("questionFour").value;
var story = document.getElementById("story").value;
var output = "";
output += "Name: " + name + "n";
output += "Number: " + number + "n";
output += "Answer: " + questionOne + "n";
output += "Answer: " + questionTwo + "nn";
output += "Some text: " + someText + "nn";
output += "Answer: " + questionThree + "nn";
output += "Answer: " + questionFour + "nn";
output += "A little story: " + story + "";
document.getElementById("output").value = output;
}
</script>
<script>
function NoteStart() {
var input = document.getElementById("output").value;
input = input.replace(/r/g, '').replace(/nn+/g, 'n');
input = wordwrap(input, 60, 'n', true);
var data = input.replace(/[ ntr]+$/g, '').split(/n+/);
var StartNS = "";
for (var i=0; i<data.length; i++) {
if (i%10==0) {
if (i>0)
output += "n";
output += "ThreenLinesnDownn";
}
output += data[i]+"n";
}
output += (data.length%10>0) ? "nn" : "n";
document.getElementById("secondOutput").value = output;
}
</script>
正如我所说,我一直在尝试自己修复一段时间,但在这里很困惑。感谢任何帮助。在这里,我在这里做了一个jsfiddle https://jsfiddle.net/s8qhezmx/,所以任何人都可以看到有效的工作
在您的 function NoteStart()
中put var output = "";
function NoteStart() {
var output = "";
// stuff
}
在此声明之前,您要引用的output
变量是包含<textarea id="output">
的HTMlelement对象的output
全局对象,这就是为什么在循环中执行output += //stuff
时会获得[object HTMLTextAreaElement]
的原因。
希望有帮助
更新:
有一个全局变量命名为元素ID并包含元素的JavaScript对象引用