Замените значение заполнителя на innerHTML тега span clicked

Question

Я хотел бы иметь скрытую форму поиска на моей странице, чтобы пользователи могли фильтровать теги onclick. Я думаю, что я начал на правильном пути, но я, возможно, упал на кроличью нору.

На данный момент я могу заменить значение в форме, но я не знаю, как запустить цикл, чтобы он возвращал только внутреннийHTML элемента, который был нажат. В настоящее время он проходит через все параметры и останавливается в последний раз.

Любая помощь очень ценится.

Вот что у меня есть для тегов:

<div id="tagLinks" class="tags" > 
    <span class="clickable" onclick="getValue();">Social Media</span>, 
    <span class="clickable" onclick="getValue();">Business</span>, 
    <span class="clickable" onclick="getValue();">Content</span>, 
    <span class="clickable" onclick="getValue();">Marketing</span>, 
    <span class="clickable" onclick="getValue();">Engagement</span>, 
    <span class="clickable" onclick="getValue();">Facebook</span>, 
    <span class="clickable" onclick="getValue();">Twitter</span>, 
    <span class="clickable" onclick="getValue();">Google Plus</span> 
</div> 

Вот моя JavaScript: $ (документ) .ready (функция() {

var tagArray = document.getElementById("tagLinks").innerText.split(', '); 
    var spanObj; 
    tagArray.forEach(createElement); 

    function createElement(arrayItem, index, array) { 
     spanObj = "<span class='clickable' onclick='getValue();'>" + arrayItem + "</span>"; 
     tagArray[index] = spanObj.toString(); 
     document.getElementById("tagLinks").innerText = ""; 
     $("#tagLinks").append(tagArray.join(", ")); 
     $('#tagLinks').css('cursor','pointer'); 

    } 
    function getValue() {   

    var value = document.getElementById('tagInput').value; 
    var newValues = document.getElementsByClassName('clickable'); 

      for(var i=0; i < newValues.length; i++) { 
       document.getElementById('tagInput').value = newValues[i].innerHTML;  
      } 
    } 

Answer 1

Избавиться от OnClick и вы используете JQuery, так что используйте его.

$("#tagLinks").on("click", "span.clickable", function() { 
    $('#tagInput').val(this.innerHTML); 
}); 

Answer 2

, как @epascarello сказал, что если вы используете JQuery, вы должны использовать I t правильно.

в любом случае, здесь чистый Javascript ответ:

function getValue() {   

    var value = document.getElementById('tagInput').value; 
    var newValues = document.getElementsByClassName('clickable'); 

      for(var i=0; i < newValues.length; i++) { 
       document.getElementById('tagInput').setAttribute("src","newValues[i].innerHTML");  
      } 
    } 

Related Docs