How to fix JavaScript function that prevents dropdown list from working

Question

My complete JavaScript code is https://jsfiddle.net/JSstarter/0t98gbg3/. Dropdown list worked, but after I add setFormat function, the dropdown list stops working and it doesn't show the list of locales. Can someone please help me how to fix the JavaScript part to get the dropdown list and also the setFormat function to work?

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

You're missing the `function` keyword in front of `setFormat` — tymeJV, Jan 12 '16 at 20:07

score 1 · Answer 1 · answered Jan 12 '16 at 20:09

Super easy fix. You are missing the word 'function' before setFormat(locale). Also I noticed you are passing the variable 'locale' but you don't actually use it in the function. I assume you might need that later on but just pointing it out.

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

score 1 · Answer 2 · answered Jan 12 '16 at 20:10

There are two errors. getElementByID is spelled getElementById and you forgot function in front of setFormat. You can see this fiddle for a demo.

The end result looks like this:

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

score 1 · Answer 3 · answered Jan 12 '16 at 20:23

This works

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

How to fix JavaScript function that prevents dropdown list from working

3 Answers3