javascript - 你如何在 jQuery 中编辑 HTML 表单元素？

Question

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

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

这是我的 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>