Develop Reference

I wanto copy text in tag in list

Step 1
get id form button
Step 2
copy text in td for same id
Codepen)
https://codepen.io/terecal/pen/LoxmbP?editors=1010
$(".copy_code").click(function(e){
e.preventDefault();
var id = this.id
alert("id : ", id)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>code</td>
<td colspan="122" id="my_code_122"> hello world </td>
</tr>
</table>
<button type="button" name="button" id="122" class="copy_code">copy</button>
Is it possible?
p.s
I applied your method.
The following code works fine
`
$(".copy_code").click(function(e){
e.preventDefault();
var id = $(this).attr('id')
alert("id : " + id)
var text = document.getElementById(id),
textVal = text.innerText;
textTd = $(`#my_code_${id}`).text()
alert("copy code " + textTd) // textVal code copy
// I want to copy this text as if pressing ctrl + c. Is there a way? Thank you if you let me know.
});
`
The problem is almost solved.
I just want to copy the text I got as if I pressed ctrl + C
Can you tell me how?
ps2
current code is this
$(".copy_code").click(function(e){
e.preventDefault();
var id = $(this).attr('id')
alert("id : " + id)
var text = document.getElementById(id),
textVal = text.innerText;
textTd = $(`#my_code_${id}`).text()
alert("copy code " + textTd) // textVal code copy
// I want to copy this text as if pressing ctrl + c. Is there a way? Thank you if you let me know.
var dummy = document.createElement('textarea');
dummy.value = textTd;
//
document.body.appendChild(dummy );
dummy.select();
//
document.execCommand('copy');
document.body.removeChild(dummy);
alert("copy code2 " + textTd)
});
and copy is normally works
but after ctrl + v
it's new line(br) is not work ^^;;
original:
from django.contrib import admin
from django.urls import path, include
from . import views
app_name= 'css_challenge'
urlpatterns = [
]
copy:
from django.contrib import adminfrom django.urls import path, includefrom . import views
app_name= 'css_challenge'urlpatterns = [
]
is it possible to apply new line??

Perhaps try this. First of all you need to put a + rather than a , in your alert. Secondly, I don't know if you specifically need copy functionality because you want to paste the text somewhere else. AFAIK, I've only "copied" like that on inputs/textareas. I am unsure whether other elements support that type of API. Regardless, the below code should grab the text content. I haven't tested it but there ya go.
$(".copy_code").click(function(e){
e.preventDefault();
var id = this.id
alert("id : "+ id)
var text = document.getElementById(id),
textVal = text.innerText;
console.log(textVal);
});

Maybe you can try:
$(".copy_code").click(function(e){
e.preventDefault();
var id = $(this).attr('id');
alert(id)
// var copyText = document.getElementById("my_code");
// copyText.select();
// document.execCommand("copy");
// alert("Copied the text: " + copyText.value);
});

You can copy text to the clipboard using javascript - it's just a little inconvenient. The text has to be part of a html element.
Let's start by creating a dummy text element
var dummy = document.createElement('textarea');
and give it the value of your variable
dummy.value = textTd;
add the dummy to the DOM
document.body.appendChild(el);
select it
dummy.select();
finally copy it's text content to the system clipboard
document.execCommand('copy');
and ultimately remove the created element from the DOM again
document.body.removeChild(dummy);

how to add a h1 inside a div using javascript

I'm writing a HTML where I want to populate a h1 using Javascript. Here I'm able to populate text, but not the h1. Below is my code.
function getTheIncident(keyWord, text) {
showTheDiv();
console.log(keyWord + "\t" + text);
var e = document.getElementById('textResult');
e.innerHTML = text.replace('\^', '\'');
}
and this gives me the output as shown in the picture below.
MY aim is to add a h1 with content as Description. Basically like
<h1>Description</h1>
just above A procurement order has been placed for a RAM with 128 Gig
please let me know on how can I do this.

var h1= document.createElement('H1');
h1.innerHTML = "Description";
now add this element to a particular node you want

Just wrap the code to be added as HTML into an h1:
function getTheIncident(keyWord, text) {
showTheDiv();
console.log(keyWord + "\t" + text);
var e = document.getElementById('textResult');
e.innerHTML = "<h1>" + text.replace('\^', '\'') + "</h1>";
}

Create your tag by using createElement(), then prepend() it to your container where you want to have on first. Check below snippet for reference.
var h1Tag = document.createElement('H1');
h1Tag.innerHTML = "Your Title";
$('.output').prepend(h1Tag);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output">
This div contains the output..
</div>

https://fiddle.jshell.net/LnkfLrev/1/ Something like this? you can use document.getElementById('placeholder').innerHTML = text; to set the text of you h1element
EDIT:
https://fiddle.jshell.net/LnkfLrev/2/
Sorry, I did not quiet get you question. I updated the fiddle so it works as an anwer
I created an H1 element with var h = document.createElement("H1");
then i set the Text and add it to the body
h.innerHTML = text;
document.body.appendChild(h);
hope this helps now

Add line break to HTML from Js loop

I have a simple Js function that generates a list of random numbers based on how many the user wants. The function works fine, and logs fine, but it isn't displaying like I'd like it to. I'm new to Javascript, so I tried using the \n escape character, but it didn't do anything. Any help would be appreciated.
function generateIDs()
{
var num = document.getElementById('numberToGenerate').value;
var par = document.getElementById('numbers');
var button = document.getElementById('genButton');
button.disabled = true;
for (var x=0;x<num;x++)
{
var id = Math.floor((Math.random()*10000)+1);
par.innerHTML = id;
}
<form>
Auto-Generate <input type="text" name="number" id="numberToGenerate"/> IDs.
<button type="button" onclick="generateIDs()" id="genButton">Go!</button>
</form>
<p id="numbers">
</p>

\n doesn't mean much to a browser; use <br/> instead.
Example:
// snip
for (var x=0;x<num;x++)
{
var id = Math.floor((Math.random()*10000)+1);
par.innerHTML = id.toString() + '<br/>';
}
//snip
Note that this is going to overwrite the previous value on each iteration. You probably want this:
par.innerHTML += id.toString() + '<br/>';

add element with DOM model before paragraph

I want add new input text before paragraph. But it working opposite add after text.
What is wrong at this code?
I use document.getElementById("p1").insertBefore(node); with this aim, but without success. Why does this happen?
Code:
<html>
<head>
<title>Adding text to a page</title>
<script>
function addText() {
var sentence=document.form1.sentence.value;
var node=document.createTextNode(sentence + " ");
document.getElementById("p1").insertBefore(node);
}
</script>
</head>
<body>
<h1>Create Your Own Content</h1>
<p id="p1">Using the W3C DOM, you can dynamically
add sentences to this paragraph. Type a sentence
and click the Add button.</p>
<form name="form1">
<input type="text" name="sentence" size="65">
<input type="button" value="Add" onClick="addText();">
</form>
</body>
</html>
Question:
How to solve this issue?

The insertBefore method needs to be called on the parent node (in which you want to insert), just like appendChild:
var node=document.createTextNode(sentence + " ");
var p1 = document.getElementById("p1");
p1.parentNode.insertBefore(node, p1);
If you want to add sentences to the paragraph instead of before it (right into the <body>), you would use this:
p1.appendChild(node); // insert at the end
// or
p1.insertBefore(node, p1.firstChild); // insert at the beginning

You could
Grab the new sentence.
Grab the original content.
Put them both together in a variable.
Clear the element.
Slap it back in.
Like so:
var addText = function() {
var sentence = document.form1.sentence.value;
var node = document.createTextNode(sentence + " ");
var el = document.getElementById("p1");
var original = el.innerHTML;
var newPara = sentence + ". " + original;
el.innerHTML = "";
el.innerHTML = newPara;
}
jsFiddle
Mind you, this is alot of steps, but hey, a million ways to skin a cat.
Of course you could always shorten all of that code up there to this:
var addText = function() {
document.getElementById("p1").innerHTML = document.form1.sentence.value + ". " + document.getElementById("p1").innerHTML;
}
new jsFiddle

Commands in Javascript code are overwritten by the last one

I have stacked with my javascript code. In my app I am also using jQuery for faster writing some of the parts.
The thing is that after adding functionality to input files only the one added to the last is working. I found that maybe the reason is this same name of function with this same parameters. So to be sure I added to one my function which I want to use and to the other (I mean the first one) alert with simple text.
This is my code:
newRow.innerHTML = "<a href='#' class='editName'>"+ddList.ddElements[ddList.ddEl.id]+'</a>';
newRow.innerHTML += ' X:<input type="text" id="x'+ddList.ddEl.id+'" name="x'+ddList.ddEl.id+'" size=3 value=0>';
var xField = document.getElementById('x'+ddList.ddEl.id);
xField.relatedElement = newRow;
newRow.innerHTML += ' Y:<input type="text" id="y'+ddList.ddEl.id+'" name="y'+ddList.ddEl.id+'" size=3 value=0>';
var yField = document.getElementById('y'+ddList.ddEl.id);
yField.relatedElement = newRow;
$(xField).blur(function(){alert('Handler for X.blur() called.')});
$(yField).blur(function(){ddList.setObjectPosition(yField,obj,'y');});
if(RegExprText.test(ddList.ddEl.id))
{
newRow.innerHTML += '<br>Kolor:';
var element = document.createElement('input');
element.setAttribute('id', 'c'+ddList.ddEl.id);
element.setAttribute('name', 'c'+ddList.ddEl.id);
element.setAttribute('type', 'text');
element.setAttribute('class', 'color');
element.setAttribute('size', '6');
newRow.appendChild(element);
var myPicker = new jscolor.color(element, {});
$(element).blur(function(){ddList.setColor(element,obj);});
}
var links = newRow.getElementsByTagName('a');
var editLink = links[links.length-1];
editLink.relatedElement = newRow;
$(editLink).click(function(){ddList.deleteObject(obj,newRow);});
So when I have got only X and Y input fields then only Y is active. When I have got X, Y and colorPicker then only colorPicker works.
Interesting thing is that always is working last line of code - editLink.
And I have been trying to change
xField.relatedElement = newRow;
on
newRow.addChild(xField);
It doesn't work either.
Thanks for answers in advance.

First you do
xField.relatedElement = newRow;
And then you change
newRow.innerHTML
which will of course be reflected in the relatedElement.
If you want three different DOM elements, you have to make three different DOM elements, and not just one that you assign to three places and whose content you change three times.