如何修复阻止下拉列表工作的JavaScript函数
How to fix JavaScript function that prevents dropdown list from working
我完整的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>
超级简单的修复。setFormat(区域设置)之前缺少单词"function"。我还注意到您传递了变量"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>
有两个错误。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);
};
这适用于
<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>
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 正在全局范围中查找JavaScript函数
- 如何将输入(type=text)从html表单传递到javascript函数
- 如何调用这个匿名 JavaScript 函数
- 通过Ajax将JavaScript函数传递给PHP文件
- 在javascript函数中设置全局变量
- 如何在执行此特定onclick事件时执行JavaScript函数
- 使用javascript函数在页面初始化后加载jquery
- javascript函数同步
- 如何将一个JavaScript函数回调为多个函数
- 在javascript函数中使用php变量
- 代码背后调用一个JavaScript函数的按钮点击-C#
- 将JavaScript函数与HTML分离
- 组合两个javascript函数
- 在 Java 中的 JavaScript 函数中插入 Wicket 值
- javascript函数内部的代码用逗号而不是分号分隔
- href属性内的javascript函数
- 使用html表单中的参数调用JavaScript函数
- 分析Javascript函数中的多个对象
- javascript函数的:和=之间的区别