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

Question

I'm trying to make a simple font generator for a challenge. The form element I'm trying to edit is the tag.

The way this webpage is supposed to work is a user types in the “input textbox”, presses one of the 3 buttons and the new text will appear in the “output textbox” in the font that the user chooses.

This is what my HTML looks like:

<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>

And here is my jQuery/JS:

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

The function only works if I manually add text between the tags (innerHTML). When the user types in the textarea in the code's output (The website.), there will be no output in the “output” textarea.

I appreciate any help. Please let me know if I need to explain anything more clearly. Thanks!

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>