Identifying which Div was selected with JavaScript

Question

I have an HTML document with 6 Divs, I've written a javascript code that changes the heading depending on which div is selected (6 vars and 6 functions) e.g.

var divSelect = document.getElementById("firstDiv");


divSelect.onclick = function () {
    var mainHeading = document.getElementById("heading");
    mainHeading.innerHTML = "You have selected the first option";

};

I then have an anchor div which is linking to another HTML page, when it opens I want it to know which div was selected from the first HTML page, and then input a new heading based on the selection.

So I need to know which of the six functions was actioned based on the div that was clicked.

Any help much appreciated.

Google `addEventListener MDN` and `this in event handler` – Tushar Oct 17 '15 at 14:12 — Tushar, Oct 17 '15 at 14:12
why don't you edit the href value of your a tag – SebastianGreen Oct 17 '15 at 14:16 — SebastianGreen, Oct 17 '15 at 14:16

score 0 · Accepted Answer · edited May 23 '17 at 12:03

You can pass it in url query. Passing for example id parameter, like this: http://example.com/secondpage.html?firstpagedivid=firstDiv And then on second page you can parse url to get div id or whatever parameter you passed.

Here you can find how to get url parameter on second page: link

Html:

<div class="clickable" id="firstDiv">first</div>
<div class="clickable" id="secondDiv">second</div>
<div class="clickable" id="thirdDiv">third</div>
<br>
<div id="heading"></div>
<br> 
<a id="navigator" href="second.html">Next page</a>

Javascript:

(function() {
    var currentSelectedDiv;
    var heading = document.getElementById('heading');
    var navigator = document.getElementById('navigator');
    var divs = document.querySelectorAll('.clickable');

    for(var i=0; i<divs.length; i++) {
        divs[i].onclick = function(e) {
            var target = e.target;
            currentSelectedDiv = target.getAttribute('id');
            heading.innerHTML = ['You have selected ', currentSelectedDiv].join('');
        }
    }

    navigator.onclick = function(e) {
        e.preventDefault();
        var a = e.target;
        var href = a.getAttribute('href');
        href += '?previousPageDivId=' + currentSelectedDiv;
        alert(href);
        //Just uncomment line below
        //document.location.href = href;
    }
})();

Here you have working example: https://jsfiddle.net/3wdzh2d4/

Thanks very much for this, in the 'for' statement if I wanted to display the content of a
in each div instead of the div id how would I do that? — MrPaul91, Oct 18 '15 at 09:11
Also, if you want to send text with special characters then you should consider using url encoding on first page and url decoding on the second. — Yuriy Yakym, Oct 18 '15 at 09:30
Also take to attention, that you can send limited amount of characters through url query. So if you want to pass a long text then you need to find another solution. For example sending ajax request with selected text to server and then server will return this text on second page. Or if this text is static, then you can define an array of texts from first page on second page and take the text which conforms to the div from first page by id. Etc. — Yuriy Yakym, Oct 18 '15 at 09:34
If you provide more information about what technologies are you using and what do you want to archive, it will be much easier to help you. — Yuriy Yakym, Oct 18 '15 at 09:35

Identifying which Div was selected with JavaScript

1 Answers1