javascript - 内部HTML : changing HTML element with <select onchange ="">

标签 javascript html switch-statement getelementbyid

这里是 JavaScript 新手。

我正在尝试通过允许用户选择他们的首选货币来向慈善网站添加一些功能。我正在使用带有 select 属性的设置下拉列表。我正在尝试使用 onchange 标签通过 getElementByID().innerHTML 调用 JavaScript 函数,以更改位于单独 中的货币符号的显示div

遗憾的是,它不起作用,我也不完全清楚为什么。 :(

让我们看一下代码,好吗?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript">
        function symbolChange() {
            switch (document.getElementById('currencyCode')) {
               case 'USD':
                  document.getElementById("currencySymbol").innerHTML= "$";
                  break;
               case 'EUR':
                  document.getElementById("currencySymbol").innerHTML= "€";
                  break;
               default :
                  document.getElementById("currencySymbol").innerHTML= "$";
                  break;
                }
        }
    </script>

</head>

<body>


    <div id='currencySymbol'>
        $
    </div>

    <div id='currencyCode'>
        <select onchange='symbolChange();'>
                 <option name='USD'>USD</option>
                 <option name='EUR'>EUR</option>
        </select>
    </div>  
</body>

对于我能做些什么来完成这项工作有什么想法吗?感谢您的帮助!!

最佳答案

您的代码不正确:

switch (document.getElementById('currencyCode')) {

在 HTML 中使用它:

<select id="curVal" onchange='symbolChange();'>
     <option name='USD'>USD</option>
     <option name='EUR'>EUR</option>
</select>

并通过以下方式更改开关条件:

switch (document.getElementById('curVal').value) {

关于javascript - 内部HTML : changing HTML element with <select onchange ="">,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24386085/

相关文章:

javascript - 为什么 bxSlider 一直跳到最后一张幻灯片,为什么添加提供的选项会破坏代码?

javascript - 尝试让 mathjax 在 Facebook 上加载以呈现评论

java - Spring Boot + HTML 5 视频流

html - 具有比例的响应式 div 大小

java - 使用 switch 语句时如何忽略大小写

javascript - 如何锁定由nodejs中的多个异步方法共享的对象?

javascript - 如何使用 Vue.js 在 bootstrap-select 下拉列表中设置默认值

html - 如何在 Wordpress 中添加指向硬编码图像的链接?

javascript - 切换语句javascript

c# - 带有非常量表达式的 Switch 语句 - 扩展 C#/IDE 能力