CODEWITHSUNDEEP
javascripthtmlcss
alizulfuqar
alizulfuqar

Reputation: 148

In html how to pass div class content (text) to another class or id?

For example, i have <div id="titlebar"></div> inside html, and also i have <div class="name">Content-text</div> inside same html. Now i want pass Content-text of div class name (<div class="name">Content-text</div>) to another my id <div id="titlebar"></div> through css or js. i tried several ways, but no effect

And when i scroll up the html the id titlebar will show the text of class name

My html:

  <html>
    <body>
      <div id="titlebar"></div>
      <div class="name">Content-text</div>
    </body>
</html>

Css:

 #titlebar{
 text-align:center;
 width: 101%;
 position: fixed;
 top:0px;
 margin-left:-10px;
 padding-right:1px;
 font-family: Times New Roman;
 font-size: 16pt;
 font-weight: normal;
 color: white;
 display:none;
 border: none;
}

Javascript:

 window.onscroll = function() {scrollFunction()};

 function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {

    document.getElementById("titlebar").style.display = "block";
} else {

    document.getElementById("titlebar").style.display = "none";
}

}

Upvotes: 0

Views: 2473

Answers (6)

MTM
MTM

Reputation: 11

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script>
 $(document).ready(function(){
  var Content_text = $(".name").text();
  //alert(Content_text);
  $(function() {

$(window).mousewheel(function(turn, scroll) {

	if (scroll > 0) $('#titlebar').text('Content_text');
	else $('#titlebar').text('Copy here');

	return false;
});
});
    //$("#titlebar").text(Content_text);
});
</script>
</head>
<body>


<div class="name" style="margin-top:50px;">Content-text</div>
<div id="titlebar" style="margin-top:50px;">Copy here</div>

</body>
</html>

Upvotes: 0

pasanjg
pasanjg

Reputation: 646

Please try this..

You have to get the content from the div1 and div2 to two seperate variables div1Data and div2Data

Then from the HTML DOM innerHTML Property you can assign the content to your preferred div

function copyContent() {
  var div1Data= document.getElementById('div1');
  var div2Data= document.getElementById('div2');
  div2Data.innerHTML = div1Data.innerHTML;
}
<div id="div1">
  Content in div 1
</div>

<div id="div2">
</div>

<button onClick="copyContent()">Click to copy</button>

Upvotes: 0

MTM
MTM

Reputation: 11

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
  $("button").click(function(){
  var Content_text = $(".name").text();
    $("#titlebar").text(Content_text);
  });
});
</script>
</head>
<body>

<button>Copy</button>

<div class="name">Content-text</div>
<div id="titlebar">copy here</div>

</body>
</html>

Upvotes: 1

Dip686
Dip686

Reputation: 701

Working Sample, jsFiddle Please find it here.

<style>
#titlebar{
  border: 1px solid black;
}

.name{
  border: 1px solid red;
}
</style>
<div>
   <div id="titlebar"></div>
   <br/>
  <div class="name">Content-text</div>
  <button id='btn'>
    Click to cpoy and put text inside titlebar
  </button>
</div>

<script>
document.getElementById('btn').addEventListener('click', function() {

// Find your required code hre 


let textInsideDivelementWithclass = document.getElementsByClassName('name')[0].innerText,
    titlebarEle = document.getElementById('titlebar');
  titlebarEle.innerText =  textInsideDivelementWithclass;


});
</script>

Upvotes: 2

Mr Bitmap
Mr Bitmap

Reputation: 231

First of all you should determin an id for your div like this:

<div id="name">Content-text</div>

then use this code:

<script type="text/javascript">
   var DivName = document.getElementById('name');
   var DivTitlebar = document.getElementById('titlebar');
   DivTitlebar.innerHTML = DivName.innerHTML;
</script>

Upvotes: 0

masoud
masoud

Reputation: 321

First you get the text of your .name element:

let nameElement = document.querySelector(".name").textContent;

then you get the target element and assign the .name text to it :

document.querySelector("#titlebar").textContent = nameElement;

Upvotes: 0

Related Questions