Dilip Posted March 28, 2024 Share Posted March 28, 2024 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 https://forums.phpfreaks.com/topic/319501-text-input-to-replace-description/ Share on other sites More sharing options...
Barand Posted March 28, 2024 Share Posted March 28, 2024 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 https://forums.phpfreaks.com/topic/319501-text-input-to-replace-description/#findComment-1619841 Share on other sites More sharing options...
Dilip Posted March 28, 2024 Author Share Posted March 28, 2024 (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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html> Edited March 28, 2024 by Dilip Quote Link to comment https://forums.phpfreaks.com/topic/319501-text-input-to-replace-description/#findComment-1619844 Share on other sites More sharing options...
Barand Posted March 28, 2024 Share Posted March 28, 2024 1 Quote Link to comment https://forums.phpfreaks.com/topic/319501-text-input-to-replace-description/#findComment-1619845 Share on other sites More sharing options...
Dilip Posted March 28, 2024 Author Share Posted March 28, 2024 Hi, regret to confuse, I will show my raw code in a couple of minutes. Quote Link to comment https://forums.phpfreaks.com/topic/319501-text-input-to-replace-description/#findComment-1619846 Share on other sites More sharing options...
Dilip Posted March 28, 2024 Author Share Posted March 28, 2024 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/[email protected]/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/[email protected]/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 https://forums.phpfreaks.com/topic/319501-text-input-to-replace-description/#findComment-1619847 Share on other sites More sharing options...
Solution Barand Posted March 29, 2024 Solution Share Posted March 29, 2024 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 https://forums.phpfreaks.com/topic/319501-text-input-to-replace-description/#findComment-1619850 Share on other sites More sharing options...
Dilip Posted March 29, 2024 Author Share Posted March 29, 2024 Awesome!! Thanks a lot Quote Link to comment https://forums.phpfreaks.com/topic/319501-text-input-to-replace-description/#findComment-1619939 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.