Dilip Posted March 28 Share Posted March 28 Hi,I have this code. I need help using a text input to replace the $description in this code <p style="background: black; padding: 15px; color:white;"> $description </p> Because I need to add description many times and can save time if I have a text input that takes in description and displays the above code with text input as plain text. I can then copy paste, use it. Any help will be great. Quote Link to comment Share on other sites More sharing options...
Barand Posted March 28 Share Posted March 28 Are you looking for something like this? <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <title>Example</title> <style type='text/css'> p.desc { background-color: black; color: white; padding: 15px; width: 400px; } </style> </head> <body> <div id='target'> <!-- descriptions go here--> </div> <script type='text/javascript'> const texts = [ "Description One", "Decription Two", "Description Three" ] $.each(texts, function(key,txt) { let para = $("<p>", {class:"desc", html:txt}) $("#target").append(para) }) </script> </body> </html> 1 Quote Link to comment Share on other sites More sharing options...
Dilip Posted March 28 Author Share Posted March 28 (edited) Hi, thanks. I was hoping an HTML text input and the output as plain text. So that I can copy the <p> code from browser and paste it. ie, the output is plain text, not styled <p> tag. Something like <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>P Code Generator</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <h1>P Code Generator</h1> <input type="text" id="myInput" placeholder="Enter Description"> <button onclick="replaceDescription()">Generate Code</button> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html> Edited March 28 by Dilip Quote Link to comment Share on other sites More sharing options...
Barand Posted March 28 Share Posted March 28 1 Quote Link to comment Share on other sites More sharing options...
Dilip Posted March 28 Author Share Posted March 28 Hi, regret to confuse, I will show my raw code in a couple of minutes. Quote Link to comment Share on other sites More sharing options...
Dilip Posted March 28 Author Share Posted March 28 This is what I am trying to achieve. Get my original P code listed with the input description. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>P Code Generator</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <h1>P Code Generator</h1> <input type="text" id="myInputText" placeholder="Enter Description"> <button onclick="replaceDescription()">Generate Code</button> <script src="myscript.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html> function replaceDescription() { // Get the user input for the Description const myInput = document.getElementById("myInputText").value; // The original text with $description placeholder const originalText = '<p style="background: black; padding: 15px; color:white;"> $description </p>'; // Replace description with the input const replacedText = originalText.replace(/\$description/g, myInput); // Access the element where you want to display the plain text const displayElement = document.getElementById("textDisplay"); // Set the element's textContent to the replaced text (display as plain text) displayElement.textContent = replacedText; } Quote Link to comment Share on other sites More sharing options...
Solution Barand Posted March 29 Solution Share Posted March 29 Is this closer? <input id='mytext' type='text'> <button id='btn'>Create output</button> <br><br> <textarea id='target' cols='80' rows='5'></textarea> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script type='text/javascript'> $("#btn").click(function() { let txt = $("#mytext").val() let para = `<p style="background: black; padding: 15px; color:white;">${txt}</p>` $("#target").text(para) }) </script> Quote Link to comment Share on other sites More sharing options...
Dilip Posted March 29 Author Share Posted March 29 Awesome!! Thanks a lot Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.