Develop Reference

How can I assign unique ID to innerhtml element? [duplicate]

This question already has answers here:
How can I apply a variable as an element ID with JavaScript?
(5 answers)
How can I pass an element to a function from onclick?
(2 answers)
Closed 7 months ago.
I have this function:
function displayInputIntro() {
var submitbutton = document.getElementById('submitbutton')
var intro = document.getElementById('Intro')
var introNewSection = document.getElementById('intro-row')
introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="intro">';
submitbutton.style.display = ''
}
This function displayInputIntro() can be called multiple times, and it will insert this new section into the body of the HTML as many times as one decides to do so. Problem is, I want to add a unique identifier, so that if I were to add something like this:
introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="intro">Remove Input';,
and click on Remove Input, then it would delete the input, not all of them.
I have tried something like this:
var uniqueID = new Date()
introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="' + uniqueID '"'>Remove Input';, and click on `Remove Input`, then it would delete the input, not all of them.
but that doesn't work. How can I do this?

you are passing an string to html code, not the real JS variable.
You can try something like this thant I found in How can I apply a variable as an element ID with JavaScript?:
var id = new Date();
var html ='<li id="' + id + '">'
+ '<input type="image" id="' + id + '" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ id
+ '</li>';

Inserting a <br> into a text area via javascript [duplicate]

This question already has answers here:
How to add line breaks to an HTML textarea
(9 answers)
Closed 5 years ago.
I'm trying to input text into a textarea and have it start on a new line with every insert.
Currently this is my code, so when you enter a username/text and click post it will paste this into a text area.
<script type="text/javascript">
document.getElementById("post").addEventListener('click', function () {
var username = document.getElementById('username').value;
var input = document.getElementById('input').value;
var output = document.getElementById('output');
var outputtext = username + ":" + input;
output.value += outputtext;
});
</script>
currently the output looks like this:
Username1:Text1Username2:Text2Username3:Text3
Where As i want it to display as:
Username1:Text1
Username2:Text2
Username3:Text3
Cheers for any help

JUst add the <br> as \nto the string of outputtext:
var outputtext = username + ":" + input +"\n";
\n - a new line character n that must be escaped with backslash \ and encapsulated in double quotation marks "

&reg becomes ® in jQuery [duplicate]

This question already has answers here:
Encode URL in JavaScript
(22 answers)
Closed 6 years ago.
I have a jQuery code where I am trying to append to an existing div a label tag which contains a URL. Below is the code:
var strURL = 'http://financials.morningstar.com/ratios/r.htmlt=tup&region=usa&culture=en-US';
var str = '<li>';
str += '<label style="font-family:Arial;">' + strURL + '</label>';
str += '</li>';
$('#existingDiv').append(str);
When the page is actually displayed it shows the URL as:
http://financials.morningstar.com/ratios/r.html?t=tup®ion=usa&culture=en-US

A quick fix would be to add the label as a text as a second step after appending the html to the existingDiv - see demo below:
var strURL = 'http://financials.morningstar.com/ratios/r.htmlt=tup&region=usa&culture=en-US';
var str = '<li>';
str += '<label style="font-family:Arial;">' + '</label>';
str += '</li>';
$('#existingDiv').append(str);
$('#existingDiv label').text(strURL);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="existingDiv"></div>

split string by comma and display it after format it [duplicate]

This question already has answers here:
How to wrap each word of an element in a span tag?
(10 answers)
Closed 6 years ago.
for example i have some HTML elements like below
<p> apple,banana,oranger</p>
and i'd like to use the javascript to make it like
<p>apple</p> <p>banana</p> <p>orange</p>
How may i achieve this?
UPDATE 1:
I am using other methods to do my task due to some reaseon and it looks as like below
var node = document.getElementById('discovereedKeywords');
node.innerHTML = node.innerHTML.replace(/,/g, '<p class="tag-item">');
and in reality those <p> tags are actually generate by a for loop, but my method only change the first node it found therefore i tried
Consider the html looks like this
<p class="discovereedKeywords"> apple,banana,oranger</p>
<p class="discovereedKeywords"> apple,oranger,oranger</p>
<p class="discovereedKeywords"> kiwi,melon,pinapple</p>
Javascript
for (var i=0; i <data.result.data.length; i++){
var node[i] = document.getElementByClassName('discovereedKeywords');
node[i].innerHTML = node.innerHTML.replace(/,/g, '<p class="tag-item">');
}
}
but this those work, why?

Use .split to split the string in array. .join the array in string by concatenating </p></p> in between items. Wrap the string in <p>
$('p').get(0).outerHTML = ('<p>' + $('p').text().split(',').join('</p><p>') + '</p>');
p {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>apple,banana,oranger</p>
OR using Array#map without jQuery
var elem = document.getElementById('demo');
elem.outerHTML = elem.textContent.split(',').map(function(el) {
return '<p>' + el + '</p>';
}).join('');
p {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p id='demo'>apple,banana,oranger</p>

You can do something like this
$('#p').html(function(i, v) {
return '<p class="discovereedKeywords">' + v.split(',').join('</p><p class="discovereedKeywords">') + '</p>'; // update the html content
})
.children() // get children p
.unwrap(); // unwrap the parent p
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p">apple,banana,oranger</p>
Or use replace() here
$('#p').html(function(i, v) {
return v.replace(/([^,]+)(?:,|$)/g, '<p class="discovereedKeywords">$1</p>')
})
.children() // get children p
.unwrap(); // unwrap the parent p
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p">apple,banana,oranger</p>

Why is this div not responding to innerHTML when others on the page do? [duplicate]

This question already has answers here:
Using the variable "name" doesn't work with a JS object
(4 answers)
Closed 6 years ago.
When using JavaScript to set the innerHTML of a div I have just one div that I cannot figure out why it is not being set...
I have the following code in my <body> on my page
<div style="width:50%; margin:0 auto;">
<div id="name"></div>
<div id="image"></div>
<div id="description"></div>
</div>
<script>
var url = window.location.href;
var captured = /name=([^&]+)/.exec(url)[1];
var result = decodeURI(captured);
if (result != 'none') {
var name = document.getElementById('name');
name.innerHTML = "<p>" + result + "</p>";
var description = document.getElementById('description');
description.innerHTML = '<object data="descriptions/' + result + '.txt" style="font-family:Gotham, Helvetica, Arial, sans-serif"></object>'
var image = document.getElementById('image');
image.innerHTML = '<img style="float:left;" src="images/' + result + '.jpg">'
}
else {
document.write('You have no items in your cart');
var elem = document.getElementById('badge');
elem.parentNode.removeChild(elem);
}
</script>
For some reason the name <div> does not get modified when the description and image divs do. Is there something I am missing here?
The JavaScript console in Safari and Chrome shows no errors and both have the same result. The name variable is also not null.
Also note this is just a school project, this doesn't have to be practical by any means.

The name variable conflicts with window.name. You simply need to change var name = to var somethingElse =.