Как исправить функцию JavaScript, которая препятствует работе выпадающего списка

Question

Мой полный код JavaScript: https://jsfiddle.net/JSstarter/0t98gbg3/. Раскрывающийся список работал, но после добавления функции setFormat раскрывающийся список перестает работать и не отображает список локалей. Может кто-нибудь помочь мне, как исправить часть JavaScript, чтобы получить раскрывающийся список, а также функцию setFormat для работы?

<p id="demo">Please select a locale to show data.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Locales</button>
<div id="locale" class="dropdown-content">
<a href="#enUS" onclick="setFormat('en-US')">en-US</a>
<a href="#koKR" onclick="setFormat('ko-KR')">ko-KR</a>
<a href="#zhCN" onclick="setFormat('zh-Hans-CN')">zh-Hans-CN</a>
<a href="#jaJP" onclick="setFormat('ja-JP')">ja-JP</a>
<a href="#deDE" onclick="setFormat('de-DE')">de-DE</a>
<a href="#ruRU" onclick="setFormat('ru-RU')">ru-RU</a>
<a href="#arSA" onclick="setFormat('ar-SA')">ar-SA</a>
</div>
</div>
<script>

function myFunction() {
document.getElementById("locale").classList.toggle("show");
}

setFormat(locale) {
var date = new Date(2016, 1, 14, 0, 0, 0);
document.getElementByID("demo").innerHTML = new Intl.DateTimeFormat('en-   US').format(date);
document.getElementByID("demo").innerHTML = new Intl.NumberFormat('en-US').format(1234.56);
};

</script>

Answer 1

Есть две ошибки. getElementByID пишется getElementById и вы забыли функцию перед setFormat, Вы можете увидеть эту скрипку для демонстрации.

Конечный результат выглядит так:

function myFunction() {
   document.getElementById("locale").classList.toggle("show");
}

function setFormat(locale) {
   var date = new Date(2016, 1, 14, 0, 0, 0);
   document.getElementById("demo").innerHTML = new Intl.DateTimeFormat('en-US').format(date);
   document.getElementById("demo").innerHTML = new Intl.NumberFormat('en-US').format(1234.56);
};

Answer 2

Супер легко исправить. Вам не хватает слова "функция" перед setFormat(locale). Также я заметил, что вы передаете переменную 'locale', но вы фактически не используете ее в функции. Я полагаю, вам это может понадобиться позже, но просто укажите на это.

<script>

function setFormat(locale) {
    var date = new Date(2016, 1, 14, 0, 0, 0);
    document.getElementByID("demo").innerHTML = new Intl.DateTimeFormat('en-US').format(date);
    document.getElementByID("demo").innerHTML = new Intl.NumberFormat('en-US').format(1234.56);
};

function myFunction() {
    document.getElementById("locale").classList.toggle("show");
}


</script>

Answer 3

Это работает

<p id="demo">Please select a locale to show data.</p>

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Locales</button>
  <div id="locale" class="dropdown-content">
    <a href="#enUS" onclick="setFormat('en-US')">en-US</a>
    <a href="#koKR" onclick="setFormat('ko-KR')">ko-KR</a>
    <a href="#zhCN" onclick="setFormat('zh-Hans-CN')">zh-Hans-CN</a>
    <a href="#jaJP" onclick="setFormat('ja-JP')">ja-JP</a>
    <a href="#deDE" onclick="setFormat('de-DE')">de-DE</a>
    <a href="#ruRU" onclick="setFormat('ru-RU')">ru-RU</a>
    <a href="#arSA" onclick="setFormat('ar-SA')">ar-SA</a>
  </div>
</div>

<script type="text/javascript">
function setFormat(locale) {
var date = new Date(2016, 1, 14, 0, 0, 0);
document.getElementByID("demo").innerHTML = new Intl.DateTimeFormat('en-US').format(date);
 document.getElementByID("demo").innerHTML = new Intl.NumberFormat('en-US').format(1234.56);
};

function myFunction() {
    document.getElementById("locale").classList.toggle("show");
}
</script>


<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>