Clicking and “unclicking” elements from an ul list

Question

lets say i have an ul list like this one:

<ul id="interperson" onclick="addinterpersonal(this)">
    <li>Critical and self-critical abilities</li>
    <li>Teamwork</li>
    <li>Interpersonal skills</li>
    <li>Ability to work in an interdisciplinary team</li>
    <li>Ability to communicate with experts in other fields</li>
    <li>Appreciation of Diversity and multiculturality</li>
    <li>Ability to work in an international context</li>
    <li>Ethical commitment</li>
</ul>

<div id"printhere"> </div>

and when i click on one of the elents on my list, that element is supposed to appear lets say at the space "printhere". Also if there is an element on "printhere" then if i click it, it should disappear (get deleted). Another function (i might find it if i do the first step alone it's mandatory for you guys) is if i click on an element from my "interperson" list and it's already in the "printhere" list then an alert message shall pop up notifying the use that it has already been added. This is supposed to be done in javascript and not in Jquery, thanks in advance ps. i have tried doing it alone but i am so frustrated that i made this post (which i don't usually do so)

JavaScript attempt:

function addinterpersonal() {
    var intel = document.getElementById("inter");
    var myinter = document.getElementById("interperson").value;
    var printlist = document.getElementById("selected");
    intercount = intercount +1;
    intel.innerHTML = intercount + " Interpersonal,";
    printlist.innerHTML += "<li>" + myinter + "</li>";
}

Answer 1

first of all u have to modify your html page. A small change.. Remove that onclick function.

HTML:

<ul id="interperson">
    <li>Critical and self-critical abilities</li>
    <li>Teamwork</li>
    <li>Interpersonal skills</li>
    <li>Ability to work in an interdisciplinary team</li>
    <li>Ability to communicate with experts in other fields</li>
    <li>Appreciation of Diversity and multiculturality</li>
    <li>Ability to work in an international context</li>
    <li>Ethical commitment</li>
</ul>

<div id="printhere"></div>

here is the Javascript:

   function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}

var ul = document.getElementById('interperson');
ul.onclick = function(event) {
    var target = getEventTarget(event);
    var printlist = document.getElementById('printhere');
    var abc = target.innerHTML;
    if(printlist.innerHTML == abc) {
    alert("sameValue");
    }
    else {
        printlist.innerHTML = abc; }

};

I have also included a fiddle link. You can check. fiddle

Answer 2

First off, there's a missing =

<div id"printhere"> </div>

To get the "selected" li element, you can pass event.target

<ul id="interperson" onclick="addinterpersonal(event.target)">

and then add the li 's text to the printhere div

function addinterpersonal(elt) {
    var myinter = elt.textContent;
    var printlist = document.getElementById("printhere");
    printlist.innerHTML += "<li>" + myinter + "</li>";
}

See JSFiddle

Answer 3

Give this a whirl (and please bear in mind that this would be much simpler if you could use jQuery:

http://jsfiddle.net/79GQp/1/

<ul id="interperson">
    <li>Critical and self-critical abilities</li>
    <li>Teamwork</li>
    <li>Interpersonal skills</li>
    <li>Ability to work in an interdisciplinary team</li>
    <li>Ability to communicate with experts in other fields</li>
    <li>Appreciation of Diversity and multiculturality</li>
    <li>Ability to work in an international context</li>
    <li>Ethical commitment</li>
</ul>

<ul id="printhere"> </ul>

Note that I've changed printhere to a ul since you're trying to append li s to it.

Script:

window.onload = function () {
    document.getElementById("interperson").onclick = moveToPrint;
    document.getElementById("printhere").onclick = removeItem;
};

function checkElementType(node, type) {
    return node.nodeName.toLowerCase() === type.toLowerCase();
}

function checkForDupe(testNode, dest) {
    var existing = dest.getElementsByTagName("li"), i;

    for (i = 0; i < existing.length; i += 1) {
        if (existing[i].textContent === testNode.textContent) {
            return true;
        }
    }
    return false;
}

function moveToPrint(event) {
    var targ = event.target,
        ph = document.getElementById("printhere");

    if (checkElementType(targ, "li")) {
        if (checkForDupe(targ, ph)) {
            alert("That item has already been added!");
            return;
        }
        ph.appendChild(targ.cloneNode(true));
    }
}

function removeItem(event) {
    var targ = event.target;
    if (checkElementType(targ, "li")) {
        targ.parentNode.removeChild(targ);
    }
};

For comparison , here's how this can be done with jQuery:

http://jsfiddle.net/79GQp/3/

$(function () {
    $("#interperson").on("click", "li", moveToPrint);
    $("#printhere").on("click", "li", function () {
        $(this).remove();
    });
});

function moveToPrint() {
    var targ = $(this),
        ph = $("#printhere"),
        matchingItems = ph.children("li").filter(function () {
            return this.textContent === targ.text();
        });

    if (matchingItems.length > 0) {
        alert("That item has already been added!");
        return;
    }
    ph.append(targ.clone());
}

Answer 4

Here is everything you asked for.

http://jsfiddle.net/e964E/

I did use unique ids for the list to make it easier to check if they already existed

<ul id="interperson">
    <li data-id="1" onclick="addinterpersonal(this)">Critical and self-critical abilities</li>
    <li data-id="2" onclick="addinterpersonal(this)">Teamwork</li>
    <li data-id="3" onclick="addinterpersonal(this)">Interpersonal skills</li>
    <li data-id="4" onclick="addinterpersonal(this)">Ability to work in an interdisciplinary team</li>
    <li data-id="5" onclick="addinterpersonal(this)">Ability to communicate with experts in other fields</li>
    <li data-id="6" onclick="addinterpersonal(this)">Appreciation of Diversity and multiculturality</li>
    <li data-id="7" onclick="addinterpersonal(this)">Ability to work in an international context</li>
    <li data-id="8" onclick="addinterpersonal(this)">Ethical commitment</li>
</ul>
<ul id="printhere"></ul>

And the JS:

function addinterpersonal(ele){
    //get list of elements in printhere to checkagainst
    var printHereChildren = document.getElementById('printhere').childNodes;
    if(typeof printHereChildren !== "undefined" && printHereChildren.length >0){
        for(var i=0; i<printHereChildren.length; i++){
            if(printHereChildren[i].hasAttribute("data-id") && ele.getAttribute('data-id') == printHereChildren[i].getAttribute('data-id')){
                alert('You have already added: '+printHereChildren[i].innerText);
                return;
            }
        }
    }
    var toAdd = ele.cloneNode(true);
    toAdd.setAttribute('onclick','removePrint(this)');
    document.getElementById("printhere").appendChild(toAdd);
}
function removePrint(ele){
    ele.parentElement.removeChild(ele);
}