Javascript - Repeated use of a function without it removing previous instances? - javascript

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

Related

Is there a way to stop html from making line breaks when a tag is in another tag?

So I would like to make a calculator with some formatting to make it look nice. It keeps making a new line for my p tag and I don't want it to, is there any fix for this?
var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
var display = document.getElementById("disp");
function addAndDisplay() {
display.innerHTML = (Number(n1.value)+Number(n2.value)).toString();
}
<!DOCTYPE html>
<html>
<head>
<title>Addition</title>
</head>
<body>
<h1>Addition</h1>
<h3>Value one:</h3>
<input type="number" id="n1">
<h3>Value two:</h3>
<input type="number" id="n2">
<br>
<button onclick="addAndDisplay()">Add</button>
<h3>The output: <p id="disp">You have not calculated anything yet</p>.</h3>
</body>
</html>
EDIT: Thanks #Pipe and #Pointy I appreciate your help a lot!
Per default, a paragraph is a block level element. This means that it starts on a new line and takes up the full width. Maybe you should consider using something else.
For this kind of usecase, you would want to use <span></span>. Span is using display: inline which allows multiple inline-elements to appear next to each other.
It might be useful to read this article about the CSS display property - it will help you understand the suggested solution much better.
you shuld use span instead of p. p is paragraph element and span can be used to group elements for styling purposes
var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
var display = document.getElementById("disp");
function addAndDisplay() {
display.innerHTML = (Number(n1.value)+Number(n2.value)).toString();
}
p{
display:inline-block;}
<!DOCTYPE html>
<html>
<head>
<title>Addition</title>
</head>
<body>
<h1>Addition</h1>
<h3>Value one:</h3>
<input type="number" id="n1">
<h3>Value two:</h3>
<input type="number" id="n2">
<br>
<button onclick="addAndDisplay()">Add</button>
<h3>The output: <p id="disp">You have not calculated anything yet</p>.</h3>
</body>
</html>

How to add text to paragraphs on clicking button

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.

Input button stop working when filling the div

I have a div in my html defined like this:
<div id="rgroups" class="dialogWindow fileDialog" style="display:none;" >
<input id="rgroups_ok" class="dialogButton" type="submit" value="Done"/>
<label for="rgroups_ok"><span class="label">Start</span></label>';
</div>
In my js file the rgroups_ok is define that way:
$('rgroups_ok').observe('click', function ()
{
ui.hideDialog('rgroups');
});
If I keep to that it's working fine, the button is working.
Then I am filling that html div like that:
var div=document.getElementById('rgroups');
div.style.display='inline-block';
for (i = 1; i <= count; i++) {
div.innerHTML+=' Rgroup '+i+' values separated by / symbol: \n <textarea id="Rgroup"'+i+' rows="4" cols="50"> </textarea>';}
With that inner HTML defines button stops working...
Any clue?
Thanks
Try changing observe to on
so this:
$('#rgroups_ok').on('click', function ()
{
ui.hideDialog('rgroups');
});
You can check the details for on() here.
Observe seems to be obsolete and may not be a thing you are looking for.
I could not understand clearly. so I made demo code.
If you could mention your main subject/idea it would help us.
Full code:
Head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Body:
<div id="rgroups" class="dialogWindow fileDialog">
<label for="rgroups_ok">
<span class="label">Start</span>
</label>
</div>
<div id="rgroups2" style="display:none;">
<p onclick="textA()">Hey click here</p>
</div>
<button id="rgroups_ok2" class="dialogButton" onclick="a()">
Done
</button>
<script>
function a() {
$('#rgroups').css("display", "none");
$("#rgroups2").css("display", "inline-block");
$("#rgroups_ok2").css("display", "none");
};
function textA() {
var count = 100;
//document.getElementById("rgroups2").innerHTML += "Bye";
for (i = 1; i <= count; i++) {
document.getElementById("rgroups2").innerHTML += '<p> Rgroup ' + i + ' values separated by / symbol: \n <textarea id="Rgroup" rows="4" cols="50">' + i + ' </textarea></p>';
}
}
</script>
Hi found the solution on this post:
Is it possible to append to innerHTML without destroying descendants' event listeners?
To sum up it's not possible to append without destroying all child. Ths the event have to be reconstructed.
Thanks

HTML/Javascript form - How to make a new div element that overlays?

I'm really confused on how to go about this.
What I'm trying to do is, have a form in HTML (not <form>), just a bunch of <input> tags with a <button>.
Basically, in the javascript code, there's an event listener that activates the MakeCard() method, when the <button> is pressed.
The MakeCard() method is supposed to then replace the form (in the HTML body) with a <div> that has it's own random stuff.
How do I make this system work? Please no JQuery and other such libraries. I'm only allowed to use DOM.
This is the code I have so far:
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script>
window.addEventListener("load", function(){
var nameOfRecipient = document.getElementById("nameOfRecipient");
var colorInfo = document.getElementById("colorInformation");
var fontSize = document.getElementById("fontSize");
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient");
var resultColorInfo = document.getElementById("resultColorInformation");
var resultFontSize = document.getElementById("resultFontSize");
function MakeCard(){
// Make the card
// Show the results
ShowResults();
}
function ShowResults(){
// Show the user choices
resultNameOfRecipient.innerHTML = nameOfRecipient.value;
resultColorInfo.innerHTML = colorInfo.value;
resultFontSize.innerHTML = fontSize.value;
}
document.getElementById("submitButton").addEventListener("click", MakeCard);
});
</script>
</head>
<body>
<div id="headerContainer">
Welcome to the Card Maker!
</div>
<div id="formContainer">
<p>Name of recipient<input type="text" id="nameOfRecipient"></p>
<p>Color Information<input type="text" id="colorInformation"></p>
<p>Font Size<input type="number" id="fontSize"></p>
<input type="button" id="submitButton" value="Make Card!">
</div>
<div id="resultContainer">
<p id="resultNameOfRecipient"></p>
<p id="resultColorInformation"></p>
<p id="resultFontSize"></p>
</div>
</body>
PLEASE IGNORE THE LAST DIV WITH ID="resultContainer" and ignore all the variables that have the result in front. That stuff is other extra stuff.
It would be amazing if I could just know how to make an entirely new div that REPLACES the div with ID="formContainer".
First things first: Why use listeners when you can use onclick tags? Set the button like this, and change the listener to a dedicated function:
window.addEventListener("load", function(){
becomes
function myfunction() {
and don't forget to change the end of the script from }); to }..
Also, remove the listener from the button, which is this line.
document.getElementById("submitButton").addEventListener("click", MakeCard);
And add an onclick event to the button, and change it to a button type, to make sure it doesn't submit:
<button type="button" id="submitButton" onclick="myfunction()">Make Card!</button>
Secondly: You've set variables to actual HTML elements, which would show something like: HTML[buttonElement]... I'm assuming what you want is what was typed in the element, which is the "value" tag. You would get that by changing the variables to this:
var nameOfRecipient = document.getElementById("nameOfRecipient").value;
var colorInfo = document.getElementById("colorInformation").value;
var fontSize = document.getElementById("fontSize").value;
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient").value;
var resultColorInfo = document.getElementById("resultColorInformation").value;
var resultFontSize = document.getElementById("resultFontSize").value;
So now that we've tidy'd up your syntax and stuff, I wanna get on to the part where you said you wanted to replace the DIV. Here's my way of doing it:
I would give every element in the DIV an ID (other than the button, we've already discussed that).
<p id="nameofrecipentp">Name of recipient<input type="text" id="nameOfRecipient"></p>
<p id="colorinformationp">Color Information<input type="text" id="colorInformation"></p>
<p id="fontsizep">Font Size<input type="number" id="fontSize"></p>
You could then call a function when the function myfunction() is called.
function myfunction() {
replacediv()
And define replacediv() to replace all the elements in the form to whatever you'd like.
function replacediv() {
document.getElementById("nameofrecipentp").innerHTML =
"Enter your data here"
document.getElementById("colorinformationp").innerHTML =
"Enter your data here, for the color information"
document.getElementById("fontsizep").innerHTML =
"enter your data here for font size"
}
I think I pretty much covered everything. If you still need help, tell me.

Move element created to textarea

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>

Categories

Resources