Change div content by clicking on a button - without jQuery, please

Question

There is an i button in the middle of my website. I'd ask you to click it—you would see a button—contact.

When the user clicks on it, I want the content of the div above to be changed.

This is the code:

<section id="about" class="wrapper about accelerate hide">
            <div class="cell accelerate">
                <div class="cables center accelerate">
                    <div class="panel accelerate">
                        <header>
                        <h1>gog<em>sem</em>cel</h1>
                        </header>
                        <p><strong>gogsemcel </strong>is a trademark of <i font-family="Trebuchet MS">Company</i>.</p>
                        <p>This project is a collaboration between<br><a href="mailto:coming@soon.no" target="_blank">Company name</a> &amp; <a href="" target="_blank">gogsemcels</a>.</p>
                        <ul class="links">
                            <li><a class="download" href="info/info.html">More Info</a></li>
                            <li><a class="github" target="_blank" href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

The button's class is github. Any suggestions?

Gigantic thanks.

Answer 1

I see you have jQuery on your page so you could use this:

$('#about a.github').on('click', function(e){
    e.preventDefault();
    var content = $(this).closest('.panel').find('p');
    content[0].innerHTML = 'This is a new text!'
    content[1].innerHTML = 'This is the second line!'
});

Example

I am not a fan of disabling right-click. Just FYI I can see the whole content anyway...

If you want to do it with vanilla JS you can use this (credits do Chris's nice function):

function collectionHas(a, b) { //helper function (see below)
    for (var i = 0, len = a.length; i < len; i++) {
        if (a[i] == b) return true;
    }
    return false;
}

function findParentBySelector(elm, selector) {
    var all = document.querySelectorAll(selector);
    var cur = elm.parentNode;
    while (cur && !collectionHas(all, cur)) { //keep going up until you find a match
        cur = cur.parentNode; //go up
    }
    return cur; //will return null if not found
}
var git = document.querySelector('#about a.github');
git.addEventListener('click', function (e) {
    e.preventDefault();
    var content = findParentBySelector(git, '.panel').querySelectorAll('p');
    content[0].innerHTML = 'This is a new text!'
    content[1].innerHTML = 'This is the second line!'
});

Example

Answer 2

You should add href attribute to Contact link.

<a class="github" target="_blank" href="#contact">Contact</a>

Then, add id attribute to 2 p elements for easily selecting.

<section id="about" class="wrapper about accelerate hide">
   <div class="cell accelerate">
      <div class="cables center accelerate">
         <div class="panel accelerate">
            <header>
               <h1>viva<em>stem</em>cell</h1>
            </header>
            <p id="abc"><strong>vivastemcell </strong>is a trademark of <i font-family="Trebuchet MS">Tsovn Tsirani Company</i>.</p>
            <p id="def">This project is a collaboration between<br><a href="mailto:coming@soon.no" target="_blank">Tsovn Tsirani</a> &amp; <a href="" target="_blank">vivastemcells</a>.</p>
            <ul class="links">
               <li><a class="download" href="info/info.html">More Info</a></li>
               <li><a class="github" target="_blank" href="contact.html">Contact</a></li>
            </ul>
         </div>
      </div>
   </div>
</section>

Now, in onload event of your page, add following code. This use pure Javascript that you want.

// You can use document.querySelector -> returns the first element found.
var gh = document.querySelectorAll('#about .github')[0];

if (gh) {
    gh.addEventListener('click', function (e) {
        e.preventDefault();
        document.getElementById('abc').textContent = new Date().getTime();
        document.getElementById('def').textContent = new Date().getTime();
    })
}