Develop Reference

I want to copy text from p element with JavaScript

I want to JavaScript code that copy my text from class copy-text when I click to class copy-me. Here is my html
<div class="text">
<div class="text-wrapper">
<p class="copy-text">This will be copy</p>
<div class="bottom-element">
<span class="i-text">Share</span>
<span class="copy-me"> Copy Text </span>
</div>
</div>
</div>
<div class="text">
<div class="text-wrapper">
<p class="copy-text">This will be copy</p>
<div class="bottom-element">
<span class="i-text">Share</span>
<span class="copy-me"> Copy Text </span>
</div>
</div>
</div>
<div class="text">
<div class="text-wrapper">
<p class="copy-text">This will be copy</p>
<div class="bottom-element">
<span class="i-text">Share</span>
<span class="copy-me"> Copy Text </span>
</div>
</div>
</div>
I tried with
document.querySelectorAll('.copy-me').forEach(() => {
}
But It didn't work, help me on this, Thank you.

Event Listeners, either for vanilla JavaScript or for react. This can help you do actions on you page, sorry for not being too much help I Just need more information to give a good solution.
But here is how to use them
https://www.w3schools.com/js/js_htmldom_eventlistener.asp
https://reactjs.org/docs/handling-events.html

You can use getElementsByClass js function to access both p html elements and add 'click' event listener where you can copy the first p element innerText to second p element innerText.
Sharing my sample code below for better understanding. Try clicking on the blue bordered paragraph.
const elems=document.getElementsByClassName('copy-me');
const p1=elems[0];
const elem=document.getElementsByClassName('copied');
const p2=elem[0];
p2.addEventListener('click',()=>{
p2.innerText=p1.innerText;
})
<p class='copy-me'>hi there</p>
<p class='copied' style='border:2px solid blue;height:20px'></p>

You can addEventListeners to each element and copy the text
const elems = document.querySelectorAll('.copy-me');
elems.forEach((elem) => {
elem.addEventListener('click', (e) => {
// Get the text from the element that contains the text you want to copy
const copiedText =
e.target.parentElement.previousElementSibling.innerHTML;
// Copy text to clipboard - You can paste it using `Ctrl+v`
navigator.clipboard.writeText(copiedText);
})
})
To get a fallback for copying text to clipboard, you can check this link

A generic solution according to your problem is here. You can select the grand parent of the button, which is container, then select your .copy-text element. Then log its value. Check your clipboard to view copied text.
document.querySelectorAll('.copy-me').forEach((elem, index) => {
// Add click event listener to all elements
elem.addEventListener("click", function (event) {
// select grand parent which is text wrapper
const textWrapper = event.target.parentElement.parentElement;
// find .copy-text inside that container
const copyTextElem = textWrapper.querySelector(".copy-text");
navigator.clipboard.writeText(copyTextElem.innerText);
});
});
<div class="text">
<div class="text-wrapper">
<p class="copy-text">This will be copy</p>
<div class="bottom-element">
<span class="i-text">Share</span>
<span class="copy-me"> Copy Text </span>
</div>
</div>
</div>
<div class="text">
<div class="text-wrapper">
<p class="copy-text">This will be copy</p>
<div class="bottom-element">
<span class="i-text">Share</span>
<span class="copy-me"> Copy Text </span>
</div>
</div>
</div>
<div class="text">
<div class="text-wrapper">
<p class="copy-text">This will be copy</p>
<div class="bottom-element">
<span class="i-text">Share</span>
<span class="copy-me"> Copy Text </span>
</div>
</div>
</div>

getElementById and getElementsByClassName not working

As in mentioned code,I used getElementById and getElementsByClassName but it is not working.
It is giving error as
f[0].getElementById is not a function inside a console.
let f = document.getElementsByClassName('sec');
console.log(f[0].getElementById('p1'));
document.write(f[0].getElementById('p1'))
<div id="maindiv">
<section class="sec" id="mysec1">
<p class="para" id="p1">Para1</p>
<p class="para" id="p2">Para2</p>
<p class="para" id="p3">Para3</p>
<p class="para" id="p4">Para4</p>
<p class="para" id="p5">Para5</p>
</section>
<section class="sec" id="mysec2">
<p class="para" id="pp1">Apara1</p>
<p class="para" id="pp2">Apara2</p>
<p class="para" id="pp3">Apara3</p>
<p class="para" id="pp4">Apara4</p>
<p class="para" id="pp5">Apara5</p>
</section>
</div>

getElementById is function of document object.
If you want to get p1 inside class sec you can use querySelector as
document.querySelector('.sec #p1')
div id="maindiv">
<section class="sec" id="mysec1">
<p class="para" id="p1">Para1</p>
<p class="para" id="p2">Para2</p>
<p class="para" id="p3">Para3</p>
<p class="para" id="p4">Para4</p>
<p class="para" id="p5">Para5</p>
</section>
<section class="sec" id="mysec2">
<p class="para" id="pp1">Apara1</p>
<p class="para" id="pp2">Apara2</p>
<p class="para" id="pp3">Apara3</p>
<p class="para" id="pp4">Apara4</p>
<p class="para" id="pp5">Apara5</p>
</section>
</div>
<!-- Project -->
<script type="text/javascript">
let f = document.getElementsByClassName('sec');
console.log(document.querySelector('.sec #p1'));
//document.write(document.querySelector('.sec #p1'))
</script>

getElementsByClassName response is the array of DOM element.
getElementById is the function of the document, not DOM element.
console.log(document.getElementById('p1'));
document.write(document.getElementById('p1'))

.getElementById is a method of the object document. So you need to change your code a bit:
console.log(document.getElementById('p1'));
document.write(document.getElementById('p1'))

bro why using core js use jquery and make your life simple:
var f =$('#mysec1 > #p1'); using jquery

and if u really want to use core js use it like this:
var myDomElement = document.getElementById( "foo" ); // A plain DOM element.
$( myDomElement ).find( "a" );

How to get the value of several paragraphs with the class name using Javascript?

I want to get the text of the paragraph (p) contained in div by clicking on that div using the class name. I tried using innerText and innerHTML but it returns undefined in the console. How can I do it using only Javascript?
HTML
<div class="showName">
<p class="paragraphs">Text 1</p>
</div>
<div class="showName">
<p class="paragraphs">Text 2</p>
</div>
<div class="showName">
<p class="paragraphs">Text 3</p>
</div>
Javascript
const showName = document.getElementsByClassName('showName');
const paragraphs = document.getElementsByClassName('paragraphs');
Array.prototype.forEach.call(showName, function(element) {
element.addEventListener('click', function() {
// How can I do it here?
});
});

Working example: https://codepen.io/shinaBR2/pen/qBbxRgz
Basic code is
Array.prototype.forEach.call(showName, function(element) {
element.addEventListener('click', function() {
// How can I do it here?
const text = element.querySelector('.paragraphs').textContent;
alert(text);
});
});

If you want to get text inside all the paragraphs having "paragraphs" class, this code can also help you:
HTML
<div class="showName">
<p class="paragraphs">Text 1</p>
</div>
<div class="showName">
<p class="paragraphs">Text 2</p>
</div>
<div class="showName">
<p class="paragraphs">Text 3</p>
</div>
JAVASCRIPT
const showName = document.getElementsByClassName('showName');
const paragraphs = document.getElementsByClassName('paragraphs');
for(i=0; i < paragraphs.length; i++){
console.log(paragraphs[i].innerText);
}

Jquery remove duplicates with the same html [duplicate]

This question already has answers here:
JQuery: Remove duplicate elements?
(8 answers)
Closed 2 years ago.
I'm working on "removing duplicates" from html with jQuery. An example is the following:
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">something else</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">content</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">last p tag finally</p>
What I would like to end up with is:
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">something else</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">content</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">last p tag finally</p>
So every element to check has the same class and I want to remove the element, when the html() is the same.
Can anybody help me out with that? Can't seem to find anything helpful that jQuery provides for that...

You could use Map to store seen elements based on the inner html content and use it with jquery filter method to filter html based on that map.
const map = new Map()
const filtered = $('.duplicateRemove')
.filter(function() {
const html = $(this).html();
if (map.has(html)) return false;
else {
map.set(html)
return true;
}
})
$('body').html(filtered)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">hello</p>
<p class="duplicateRemove">something else</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">some more content</p>
<p class="duplicateRemove">content</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">this is no duplicate</p>
<p class="duplicateRemove">last p tag finally</p>

IE10 reset the scrollbars (position to top-left) for a block (overflow:auto) after {display:none, display:block} sequence

IE10 resets the scrollbars (position to top-left) for a block element if it is hidden and displayed. This block is part of a complex UI that shows and hides blocks from various places. The other browsers and IE versions works as expected (display back the block maintaing the scroll position as it was before hiding the block). See the issue here on jsfiddle.
HTML
Last item is visible (100).<br>
TEST : click
<input type="button" id="hide" value="Hide"> then <input type="button" id="show" value="Show">. Now item (1) is visible (IE10 only)
<div id="divu" style="margin-top: 10px; width:200px; height:500px; border:1px solid #888; overflow:auto;">
<p class="item">1</p>
<p class="item">2</p>
<p class="item">3</p>
<p class="item">4</p>
<p class="item">5</p>
<p class="item">6</p>
<p class="item">7</p>
<p class="item">8</p>
<p class="item">9</p>
<p class="item">10</p>
<p class="item">11</p>
<p class="item">12</p>
<p class="item">13</p>
<p class="item">14</p>
<p class="item">15</p>
<p class="item">16</p>
<p class="item">17</p>
<p class="item">18</p>
<p class="item">19</p>
<p class="item">20</p>
<p class="item">21</p>
<p class="item">22</p>
<p class="item">23</p>
<p class="item">24</p>
<p class="item">25</p>
<p class="item">26</p>
<p class="item">27</p>
<p class="item">28</p>
<p class="item">29</p>
<p class="item">30</p>
<p class="item">31</p>
<p class="item">32</p>
<p class="item">33</p>
<p class="item">34</p>
<p class="item">35</p>
<p class="item">36</p>
<p class="item">37</p>
<p class="item">38</p>
<p class="item">39</p>
<p class="item">40</p>
<p class="item">41</p>
<p class="item">42</p>
<p class="item">43</p>
<p class="item">44</p>
<p class="item">45</p>
<p class="item">46</p>
<p class="item">47</p>
<p class="item">48</p>
<p class="item">49</p>
<p class="item">50</p>
<p class="item">51</p>
<p class="item">52</p>
<p class="item">53</p>
<p class="item">54</p>
<p class="item">55</p>
<p class="item">56</p>
<p class="item">57</p>
<p class="item">58</p>
<p class="item">59</p>
<p class="item">60</p>
<p class="item">61</p>
<p class="item">62</p>
<p class="item">63</p>
<p class="item">64</p>
<p class="item">65</p>
<p class="item">66</p>
<p class="item">67</p>
<p class="item">68</p>
<p class="item">69</p>
<p class="item">70</p>
<p class="item">71</p>
<p class="item">72</p>
<p class="item">73</p>
<p class="item">74</p>
<p class="item">75</p>
<p class="item">76</p>
<p class="item">77</p>
<p class="item">78</p>
<p class="item">79</p>
<p class="item">80</p>
<p class="item">81</p>
<p class="item">82</p>
<p class="item">83</p>
<p class="item">84</p>
<p class="item">85</p>
<p class="item">86</p>
<p class="item">87</p>
<p class="item">88</p>
<p class="item">89</p>
<p class="item">90</p>
<p class="item">91</p>
<p class="item">92</p>
<p class="item">93</p>
<p class="item">94</p>
<p class="item">95</p>
<p class="item">96</p>
<p class="item">97</p>
<p class="item">98</p>
<p class="item">99</p>
<p class="item selected">100</p>
</div>
...
JS
$(document).ready(function(){
$('#hide').click(function(){
$('#divu').hide();
});
$('#show').click(function(){
$('#divu').show();
});
$('#divu').scrollTop($('#divu')[0].scrollHeight);
});
...
CSS
.item {
margin:1px;
padding: 2px;
background: #eee;
}
.selected {
background-color: #faa;
}
UNACCEPTED KNOWN SOLUTION: I do not want this 'workaround' to store 'scrollTop'/'scrollLeft' and restore them back for my app in hundreds of source-code lines only for IE10 while the other browsers works just fine. The provided code is as simple as possible just to illustrate the issue. In my real app there are iframes involved and many HTML Elements. I do not hide/show directly the block (overflow:auto) but a parent many levels up in the DOM tree. The question is why IE10 behave like this (is this a known issue of IE10?) and how can I implement a shorter/smarter solution with a minimal intervention on the existing source-code.

Your problem will solve if you add the below line into click function
$('#divu').scrollTop($('#divu')[0].scrollHeight);
Working Demo
jQuery
$(document).ready(function(){
$('#hide').click(function(){
$('#divu').hide();
});
$('#show').click(function(){
$('#divu').show();
$('#divu').scrollTop($('#divu')[0].scrollHeight); /*Added this line*/
});
$('#divu').scrollTop($('#divu')[0].scrollHeight);
});

I don't know what is the reason of this, but I guess you can store scrollTop value when you hide list and restore it when you show it like this:
$(document).ready(function(){
var scrollVal; // variable
$('#hide').click(function(){
scrollVal = $('#divu').scrollTop();
$('#divu').hide();
});
$('#show').click(function(){
$('#divu').show();
$('#divu').scrollTop(scrollVal);
});
$('#divu').scrollTop($('#divu')[0].scrollHeight);
});
Or use
$('#divu').css('visibility', 'collapse');
// ...
$('#divu').css('visibility', 'visible');
Fiddle
Or you can overload jQuery show and hide functions with your custom logic. I think this solution will be much easy and efficient for you.