两种不同的JavaScript函数

Question

我试图让两个不同的按钮被点击并显示一组不同的表情符号。我有第一个按钮，当它们被点击时显示表情符号。但是当我创建一个连接到另一个名为myFunction2()的JavaScript函数的按钮时，代码不起作用。单击它们时，两个按钮都没有显示任何内容。有人能告诉我我做错了什么吗？为了清楚起见，我想创建一个不同的函数，当我单击按钮时，它会执行相同的操作（显示一组不同的表情符号）。

第二个功能：

<div class="dropdown" id="div2">
  <button onclick="myFunctionn()" class="dropbtn">Add emojis</button>
  <ul id="myDropdown2" class="dropdown-content">

  </ul>
</div>

<script>

emojis = document.getElementById("myDropdown2").getElementsByTagName("li")

for (var i = 0; i < emojis.length; i++) {
    emojis[i].addEventListener("click", function() {
        var smiley = this.innerHTML;
        ins2pos(smiley, 'textf2');
    });
}

function ins2pos(str, id) {
    var TextArea = document.getElementById(id);
    var val = TextArea.value;
    var before = val.substring(0, TextArea.selectionStart);
    var after = val.substring(TextArea.selectionEnd, val.length);

    TextArea.value = before + str + after;
    setCursor(TextArea, before.length + str.length);

}

function setCursor(elem, pos) {
    if (elem.setSelectionRange) {
        elem.focus();
        elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown2").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn') && !event.target.matches('#myDropdown2   li')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

</script>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunctionn() {
    document.getElementById("myDropdown2").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

</script>

第一个功能：

<script>

emojis = document.getElementById("myDropdown").getElementsByTagName("li")

for (var i = 0; i < emojis.length; i++) {
    emojis[i].addEventListener("click", function() {
        var smiley = this.innerHTML;
        ins2pos(smiley, 'textf2');
    });
}

function ins2pos(str, id) {
    var TextArea = document.getElementById(id);
    var val = TextArea.value;
    var before = val.substring(0, TextArea.selectionStart);
    var after = val.substring(TextArea.selectionEnd, val.length);

    TextArea.value = before + str + after;
    setCursor(TextArea, before.length + str.length);

}

function setCursor(elem, pos) {
    if (elem.setSelectionRange) {
        elem.focus();
        elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn') && !event.target.matches('#myDropdown li')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

</script>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

</script>

<div class="dropdown" id="div2">
<button onclick="myFunctionn()" class="dropbtn">Add emojis</button>
<ul id="myDropdown2" class="dropdown-content">

</ul>
</div>