Нажатие кнопки и «unclicking» элементы из списка уль

Question

позволяет сказать, что у меня есть список уль как этот:

<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> 

и когда я нажимаю на одном из elents в моем списке, то этот элемент должен появиться скажем, в пространстве «printhere». Также, если есть элемент на «printhere», то, если я нажму на него, он должен исчезнуть (удалить). Другая функция (я могу найти ее, если я сделаю первый шаг самостоятельно, это обязательно для вас, ребята), если я нажму элемент из моего списка «interperson», и он уже находится в списке «printhere», тогда появится всплывающее предупреждение уведомляя об использовании, которое оно уже добавлено. Это должно быть сделано в javascript, а не в JQuery, заранее спасибо ps. Я попытался сделать это в одиночку, но я так расстроен, что я сделал этот пост (который я обычно не делают так)

JavaScript попытка:

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

Во-первых, есть недостающий =

<div id"printhere"> </div> 

Чтобы получить "выбранный" li элемент, вы можете передать event.target

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

, а затем добавить текст в li «сек на printhere DIV

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

См JSFiddle

Answer 2

Дайте этому водоворот (и, пожалуйста, имейте в виду, что это было бы гораздо проще, если вы могли бы использовать 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> 

Обратите внимание, что я изменил printhere на ul, так как вы пытаетесь добавить li s к нему.

Сценарий:

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); 
    } 
}; 

Для сравнения, вот как это можно сделать с помощью 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 3

Вот все, что вы просили.

http://jsfiddle.net/e964E/

я использовал уникальные идентификаторы для списка, чтобы сделать его легче проверить, если они уже существовали

<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> 

И 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); 
} 

Answer 4

первую очередь и есть для изменения вашей html-страницы. Небольшое изменение. Удалите эту функцию onclick.

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> 

вот 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; } 

}; 

Я также включил скрипку ссылку. Вы можете проверить. fiddle