javascript - Javascript下拉菜单可更改HTML

我正在尝试为此添加一些交互式控件：http://jakscoproductions.com/2520dip8/

这是专门的代码：
的HTML

        Zoom:
        <select id="zoom" onchange="zoom()">
            <option>50%</option>
            <option>75%</option>
            <option selected="selected">100%</option>
            <option>125%</option>
            <option>150%</option>
            <option>200%</option>
        </select>
    Opacity:
        <select id="opacity" onchange="opak()">
            <option value="0.3">30%</option>
            <option value="0.55">55%</option>
            <option value="0.7">70%</option>
            <option value="0.85" selected="selected">85%</option>
            <option value="0.9">90%</option>
            <option value="0.99">99%</option>
        </select>

JS

//zoom
function zoom()
{
var zooM=document.getElementById("zoom");
document.getElementById("bbtop").style.width="zooM.options[zooM.selectedIndex]";
document.getElementById("bg").style.width="zooM.options[zooM.selectedIndex]";
}
//opacity
function opak()
{
var opak=document.getElementById("opacity");
var element = document.getElementById('bbtop');
element.style.opacity = "opak.options[opak.selectedIndex]";
element.style.filter  = "opak.options[opak.selectedIndex]";
}

我究竟做错了什么？

最佳答案

删除字符串文字，并按如下所示分配所选选项的text（或value）属性。

//zoom
function zoom()
{
   var zooM=document.getElementById("zoom");
   document.getElementById("bbtop").style.width= zooM.options[zooM.selectedIndex].text;
   document.getElementById("bg").style.width= zooM.options[zooM.selectedIndex].text;
}
//opacity
function opak()
{
   var opak=document.getElementById("opacity");
   var element = document.getElementById('bbtop');
   element.style.opacity = opak.options[opak.selectedIndex].text;
   element.style.filter  = opak.options[opak.selectedIndex].text;
}