用点击的 span 标签的 innerHTML 替换占位符值答案

【问题标题】：Replace placeholder value with innerHTML of span tag clicked用点击的 span 标签的 innerHTML 替换占位符值
【发布时间】：2015-02-10 07:12:13
【问题描述】：

我想在我的页面上有一个隐藏的搜索表单，以允许用户在点击时过滤标签。我想我一开始走在正确的轨道上，但我可能已经掉进了兔子洞。

到目前为止，我可以替换表单中的值，但我不知道如何运行循环，以便它只返回被点击项目的 innerHTML。它目前贯穿所有选项并在最后停止。

非常感谢任何帮助。

这是我的标签：

<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： $(document).ready(function() {

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

【问题讨论】：

标签： javascript arrays loops innerhtml

【解决方案1】：

摆脱onclick，你正在使用jQuery，所以使用它。

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

【讨论】：

谢谢！简单得多。效果很好！
一个快速跟进问题 - 为了让表单在点击时提交，我添加了 $("#tagLinks").on("click", "span.clickable", function() { $ ('#tagInput').val(this.innerHTML); ** $("form#tag_search-form").submit(); ** });但它没有运行搜索，我没有收到错误。这里有什么我做错了吗？
不知道表格是什么...mayeb $("form#tag_search-form")[0].submit();
<form id="tag_search_form" name="catcustomcontentform74887" method="post"onsubmit="return checkWholeForm74887(this)" action="/Default.aspx?CCID=24758&amp;FID=345024&amp;ExcludeBoolFalse=True&amp;PageID=15340119"> <label for="CAT_Custom_16">Tags</label> <input id="tagInput" type="text" maxlength="255" value="bibs" name="CAT_Custom_16" id="CAT_Custom_16" /> <input name="tag_search_form" class="cat_button" type="submit" value="Search" /> </form>
ID 不匹配。

【解决方案2】：

正如@epascarello 所说，如果你使用jquery，你应该正确使用它。

无论如何，这是一个纯 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

【讨论】：

感谢您的帮助！这个答案也对我有用。