innerHTML:使用<select onchange =“”> </select>更改HTML元素

时间:2014-06-24 11:59:11

标签: javascript html switch-statement getelementbyid

Javascript新手在这里。

我试图通过允许用户选择他们的首选货币来为慈善网站添加一些功能。我使用带有select属性的设置下拉列表。我尝试使用on change标记来调用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>

对于我能做些什么才能使这项工作?谢谢你的帮助!!

2 个答案:

答案 0 :(得分:1)

您的代码不正确:

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

答案 1 :(得分:0)

做的:

<select onchange='symbolChange(this);'>
                 <option name='USD'>USD</option>
                 <option name='EUR'>EUR</option>
        </select>

和js

function symbolChange(obj) {
var val = obj.value;
switch (val) {
...

演示:: jsFiddle