-1

I have in header this code:

<h1 class="header-title">
  <span>Title</span>
</h1>

Then on page content I have:

<div id="content">
  <h1 class="category-title">Nike</h1>
</div>

I can't edit header in backend, I just can add JS code before tag. So my question is, it's possible to use JS and take the title from content and replace it with the h1 title in header? The title in header is the same on all pages, I want to have there "category-title".

VXp
  • 11,598
  • 6
  • 31
  • 46
Patrik Štolba
  • 45
  • 5
  • 10
    The posted question does not appear to include [any attempt](https://idownvotedbecau.se/noattempt/) at all to solve the problem. StackOverflow expects you to [try to solve your own problem first](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users), as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a [MCVE]. For more information, please see [ask] and take the [tour]. – CertainPerformance Sep 21 '18 at 06:35
  • 4
    [This](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) is where you'd start. :-) – T.J. Crowder Sep 21 '18 at 06:36
  • 4
    To answer your question, "yes it is possible". – Martin Sep 21 '18 at 06:38
  • could you tell us what have you down so far regarding this issue? – HubballiHuli Sep 21 '18 at 06:38
  • Well, I am just new in Javascript, my daily work is HTML and CSS. I know how to replace text with another in JS. But don't know how to find and replace the text for another. I don't need the whole code, just wn't to help where to start :-) – Patrik Štolba Sep 21 '18 at 06:42

3 Answers3

0

You need to add an event listener to the DOMContentLoaded-event (this makes sure Javascript can access the elements on the page). In this listener, read the text from one element and set the other element's text to it:

document.addEventListener('DOMContentLoaded', function() {
  let headline = document.querySelector('#content h1.category-title').textContent;
  document.querySelector('h1.header-title span').textContent = headline;
})
<h1 class="header-title">
  <span>Title</span>
</h1>

<div id="content">
  <h1 class="category-title">Nike</h1>
</div>
connexo
  • 53,704
  • 14
  • 91
  • 128
  • please edit your answer due to [Code inside DOMContentLoaded event not working](https://stackoverflow.com/questions/39993676/code-inside-domcontentloaded-event-not-working/39993724#39993724) – Janice Zhong Sep 21 '18 at 06:59
  • @JaniceZhong No need to edit, that post referred to a special case where OP had parts of their scripts declared as `type="text/babel"` so a clientside Babel-process would transpile it. – connexo Sep 21 '18 at 07:26
-1

document.getElementById("title").innerText = document.getElementById("content").innerText;
<h1 class="header-title">
  <span id="title">Title</span>
</h1>

<div id="content">
  <h1 id="content" class="category-title">Nike</h1>
</div>
Atul Sharma
  • 9,397
  • 10
  • 38
  • 65
-1

Yet it is possible. 

<h1 class="header-title">
    <span id="title">Title</span> <!-- add some title !--> 
 </h1>

<div id="content">
  <h1 id="category_title" class="category-title">Nike</h1> <!-- add some title !-->

on your js

<script>
   var title = document.getElementById('title'); //get the element of the header
   var category_title = document.getElementById('category_title'); //get the element of the category
   title.innerHTML = category_title.innerHTML;  //the content of category will now be the content of you title
</script>

Hope that helps you!

SLM Dev
  • 1
  • 2