I'm making a policy generator page. Where you input the text and get the output. But I'm facing the problem:
problem (I'm not able to generate multiple codes. Mean I want to generate privacy policy terms and conditions in different div areas eg:( <p id="p2"><code class="generator__markup-generated"></code></p>))
Here's my code
const generate = document.querySelector('.generate-markup');
generate.addEventListener('click', () => {
const varName = document.querySelector('#company').value;
const idName = document.querySelector('#url').value;
const markupContainer = document.querySelector('.generator__markup-generated');
//sample paragraph policy
const markup = `
${varName} have a website ${idName} which you can use to generate policies.
`;
markupContainer.textContent = markup;
});
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<div class="generator__markup" style="font-size: 18px; text-align: center;"><label>Company Name:</label> <input id="company" type="text" /> </div>
<div class="generator__markup" style="font-size: 18px; text-align: center;"><label>Website Url:</label> <input id="url" type="text" /> </div>
<button class="generate-markup">Generate Code</button>
</br>
<div class="generator__markup">
<h1 style="text-align: center;">Copy Your Page</h1>
<p id="p2"><code class="generator__markup-generated"></code></p>
<center>
<button onclick="copyToClipboard('#p2')">Click To Copy</button></center>
please help in this thing
To modify HTML elements, you use the JavaScript DOM API.
It appears that the text for the policies is stored in the markup variable. We need to take this text and put it inside the element as innerText.
First, we need to get a reference to the DOM element. I see that you have selected the element using querySelector to grab a class attribute. This selects all elements with that class. You need to use an id attribute instead to select a single element. Let's assume you assign the id attribute of the paragraph to generated-markup-paragraph.
So, with this corrected code, we can now set the text of the paragraph:
const markupParagraph = document.getElementById("generated-markup-paragraph");
markupParagraph.innerText = markup;
That code should go in the place of the markupContainer.textContent = markup line.
Related
I need to insert this html tree when I click a button
<div class='img-wrapper'> <img id='immagine_preview' width='200px' height='200px' data-id_immagine='1'><button type='button' class='rimuoviImg' ><span class='fa fa-times'></span></button></div>
I tried this code, but it returns me a body tag with my html inside it.
var stringToHTML = function (str) {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
return doc.body;
};
I need to dynamically add the previous html elements before an upload button (I use a before() method with the stringToHTML function inside and it works). There is a simpler way to do this?. Because I learnt that the documen.createElement doesn't work with a complex argument.
Thank to all community to the help they gave me even with my previous questions.
You can create a html variable with template literal and inside that you can write your html semantic then you can use insertAdjacentHTML()
Use a template string to contain the HTML, and when you click the button use insertAdjacentHTML to add it to an existing element.
const str = `
<div class="img-wrapper">
<img id="immagine_preview" width="200px" height="200px" data-id_immagine="1">
<button type="button" class="rimuoviImg">
<span class="fa fa-times"></span>
</button>
</div>
`
// Cache the element you want to markup to appear,
// and the button
const div = document.querySelector('div');
const button = document.querySelector('button');
// Add a click listener to the button, and insert
// the markup to the chosen element.
button.addEventListener('click', () => {
div.insertAdjacentHTML('beforeend', str);
});
<button>Click</button>
<div />
You could just append the HTML to the element's innerHTML:
document.querySelector('button').addEventListener('click', function() {
document.body.innerHTML += `<div class='img-wrapper'> <img id='immagine_preview' width='200px' height='200px' data-id_immagine='1'><button type='button' class='rimuoviImg' ><span class='fa fa-times'></span></button></div>`;
})
<button>Insert HTML</button>
I have links embedded inside .media-body .media-heading in the HTML example. I'm wanting to write JS to remove any link where the text does not start with the value attribute in the input element, in this case "A"
I've done a manual version below that checks the first A tag and manually removes the other A tag on the click of a button if the text doesn't start with "A". I need this to somehow loop through and do this automatically on page load but not sure how I do that. Any help is appreciated.
<!DOCTYPE html>
<html>
<body>
<input type="text" name="search" value="A" class="searchbox">
<div class="media-body">
<div class="media-heading">
A doc beginning with A
</div>
</div>
<div class="media-body">
<div class="media-heading">
Doc beginning with D
</div>
</div>
<button onclick="startFunction()">Remove wrong doc</button>
<script>
function startFunction() {
var az = document.getElementsByTagName("input")[0].getAttribute("value");
var getstart = document.getElementsByTagName("a")[0].innerHTML;
var searchletter = getstart.startsWith(az);
var myobj = document.getElementsByTagName("a")[1];
if(searchletter = az)
{
myobj.remove();
}
}
</script>
</body>
</html>
The second part of your question as how to do this automatically on page load is answered rather quickly. Conveniently you already wrapped the functionality inside it's own function - startFunction(). So all you have to do is execute that function after the <body> definition of your html code.
The first part isn't much more difficult as you also almost have anything you need set up yet. The only thing that's missing is looping over the HTMLCollection - more or less an array - retrieved by executing document.getElementsByTagName("a") using a simple for-loop.
There's a catch though: as you loop over the HTMLCollection and eventually remove an object from the DOM using .remove() you're ultimately changing the collection too. In other words, if you remove an object, the list shrinks by one element. To compensate your loop needs to start with the initial number of elements and decrement by one.
Here's an example:
function startFunction() {
let az = document.getElementsByTagName("input")[0].getAttribute("value");
let elements = document.getElementsByTagName("a");
let element;
for (let a = elements.length - 1; a >= 0; a--) {
element = elements[a];
if (!element.innerHTML.startsWith(az)) {
element.remove();
}
}
}
startFunction();
<input type="text" name="search" value="A" class="searchbox">
<div class="media-body">
<div class="media-heading">
A doc beginning with A
</div>
</div>
<div class="media-body">
<div class="media-heading">
Doc beginning with D
</div>
<div class="media-body">
<div class="media-heading">
Something completely different
</div>
</div>
How would I repeat the output of a function, without it affecting previous instances outputs of the function?
For some context:
I am creating a text editor and have created a "link-maker" which creates an relative href link.
However, when I append the link to the text area content, the link displays perfectly for the first instance. Yet, if I repeat that function to add another relative link, it removes the html wrapping the first link appended.
I have tried changing the text output of the link to getElementByClassName, as I thought that the ID would only be best used for a sole function which would not need to be repeated. Where as by using the class it allows for more general use.
Some code for example:
<textarea name="textarea" class="txtarea" id="textarea" style="display: none; font-family: Arial;"></textarea>
<iframe name="editor" id="editor" style="width:824; height: 400; font-family: Arial;"></iframe>
function bcmllink() {
var logicalid = document.getElementById("logicalid");
var txtinput = document.getElementById("txtinput");
var txtOutput = document.getElementById("txtOutput");
var name = logicalid.value;
txtOutput.value = "\x3ca href\x3d\x22\x23\x22 bcmltype\x3d\x22link\x22 logicalid\x3d\x22" + logicalid.value + "\x22\x3e" + txtinput.value + "\x3c\x2fa\x3e"
}
function appendtotext() {
var myTextArea = $('.txtarea');
myTextArea.val(editor.document.getElementsByTagName('body')[0].innerHTML = editor.document.getElementsByTagName('body')[0].
textContent + txtOutput.value + " ")
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<textarea name="textarea" class="txtarea" id="textarea" style="display: none; font-family: Arial;"></textarea>
<iframe name="editor" id="editor" style="width:824; height: 400; font-family: Arial;"></iframe>
<div id="bcml">
<h3>BCML Links</h3>
<form action="">
<fieldset class="bcml_links">
<label>Enter your logical id</label><input type="number" id="logicalid" class="left5"/><br><br>
<label>Enter your text</label><input type="text" id="txtinput" class="left5"/><input class="left5" type="button" value="Generate" onClick="bcmllink()" /><br><br>
<input type="text" style="width : 600;" id="txtOutput" /><br><br>
<b>Copy and paste this text into your source view</b>
<input type="button" value="append" onClick="appendtotext()"/>
</fieldset>
</form>
Maybe you should consider using lists instead of textarea. Im currently using this for a chatapp im creating and it doesnt remove the previous messages when i recieve a new one.
You are already importing jquery. Why not make use of its .text() function?
$('textarea#textarea').text("<a href='ok'>Click here</a>");
Note, that you will not have to worry about formatting HTML or escaping characters.
If you want to append to a previously filled textarea: you would do something like:
var old_text = $('textarea#textarea').text();
$('textarea#textarea').text(old_text + "<a href='ok'>Click here</a>");
I managed to find the answer to what I was looking for:
function appendtotext() {
var myTextArea = $('.txtarea');myTextArea.val(editor.document.getElementsByTagName('body')[0].innerHTML = editor.document.getElementsByTagName('body')[0].
innerHTML + txtOutput.value + " ")}
The issue was that I was previously using textContent on the last line (where innerHTML now sits). This meant that with each instance of the function being used, it was removing the surrounding html tags and placing in only the text content.
See here for further information:
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
I'm trying to copy text to clipboard that is inside a h3 tag. I get the following error at the copyText.select() code line.
Uncaught TypeError: copyText.select is not a function
at HTMLDivElement.
edit: When using on a input-tag the copy to clipboard function works, but not when inside h3 tag.
HTML
<div class="colorDiv" id="firstColorObject">
<h3 class="colorCode" id="p1" value="123">#Color 1</h3>
</div>
JavaScript
document.querySelector("#firstColorObject").addEventListener("click", function(){
var copyText = document.getElementById("p1");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}, false);
You can call select with an <input>-element but not with a <h3>-element.
Nevertheless you can take advantage of <input> when you assign the content of #p1 to a hidden field before calling select with it.
Note that: Calling select with an hidden field only works when you wrap an actually visible field around a <div>-element that is hidden (only tested with opacity:0). A value could not be copied (through select and document.execCommand("copy")) from a truly hidden input like this:
<input type="hidden" id="copyText"/>
Hope my example below helps you (to execute it click on "Run Code snippet"-Button):
document.querySelector("#firstColorObject").addEventListener("click", function(){
var p1 = document.getElementById("p1");
// set "#Color 1" with the hidden field so that you can call select on it
var hiddenField = document.getElementById("copyText");
hiddenField.value = p1.innerHTML;
hiddenField.select();
document.execCommand("copy");
alert("Copied the text: " + hiddenField.value);
}, false);
<div class="colorDiv" id="firstColorObject">
<h3 class="colorCode" id="p1" value="123">#Color 1</h3>
<div style="opacity:0">
<input type="text" id="copyText"/>
</div>
</div>
The input.select() function is not applicable to h3 . Manipulating the selection is usually done
with window.getSelection().addRange() .
Try
<html>
<body>
<h3>Hello world</h3>
<script type="text/javascript">
var h3 = document.querySelector('h3');
var r = document.createRange();
r.selectNode(h3);
window.getSelection().addRange(r);
document.execCommand("copy");
</script>
</body>
</html>
Clipboard js will be helpfull in your case
I would like to link the 2 scripts to send the result of the first to the clipboard, using the second script. Both work but separately
Thank you, sorry if I am not clear.
<html>
<body>
<p>Click the button to create a h1 element with some text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var h = document.createElement("H1");
var t = document.createTextNode("It works");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
<script type="text/javascript" src="ZeroClipboard.js">
</script>
<textarea name="box-content" id="box-content" rows="10" cols="70">
Will be copied to clipboard.
Line2.
Line3.
</textarea>
<br /><br />
Simply by changing .value of textarea:
document.getElementById('box-content').value = "It works";
You can not place a tag in textArea tag.
The <textarea> tag defines a multi-line text input control.A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
HTML textarea
Instead you can place text only in areatag.
function myFunction() {
//var h = document.createElement("H1");
var t = document.createTextNode("It works");
//h.appendChild(t);
document.getElementById('box-content').appendChild(t);
}
myFunction();
<textarea name="box-content" id="box-content" rows="10" cols="70"></textarea>