您如何在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>