您如何在jQuery中编辑HTML表单元素？

Question

我正在尝试制作一个简单的字体生成器来应对挑战。 我要编辑的表单元素是标签。

该网页的工作方式是用户在“输入文本框”中键入，按三个按钮之一，新文本将以用户选择的字体显示在“输出文本框”中。

这是我的HTML外观：

<div id=“inputContainer”>
    <p id=“inputText style=“text-decoration:underline;position:relative;”>Input</p>
    <textarea id=“input” rows=“10” columns=“10”></textarea>
</div>
<div id=“outputContainer”>
    <p id=“outputText” style=“text-decoration:underline;position:relative;”>Output</p>
    <textarea id=“output” rows=“10” columns=10”></textarea>
</div>

这是我的jQuery / JS：

var inputText = $("#input").html();
    $("#monospaceButton").click(function() {
    $("#output").html(inputText);
});

仅当我在标签（innerHTML）之间手动添加文本时，该功能才有效。 当用户在代码输出（网站）中输入文本区域时，“输出”文本区域中将没有输出。

感谢您的帮助。 如果需要进一步说明，请告诉我。 谢谢！

Answer 1

 $("#button1").click(function() { var value = $("#input").val(); $("#output").css('font-family', 'serif'); $("#output").val(value); }); $("#button2").click(function() { var value = $("#input").val(); $("#output").css('font-family', 'monospace'); $("#output").val(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <p id="inputText" style="text-decoration:underline;position:relative;">Input</p> <textarea id="input" rows="3" columns="10"></textarea> </div> <button id="button1">Style 1</button> <button id="button2">Style 2</button> <div> <p id="outputText" style="text-decoration:underline;position:relative;">Output</p> <textarea id="output" rows="3" columns="10"></textarea> </div>