Javascript 下拉菜单来更改 HTML

Question

我正在尝试为此添加一些交互式控件：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]";
}

我做错了什么？

Answer 1

删除字符串文本并分配所选选项的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;
}

Answer 2

element.style.opacity = "opak.options[opak.selectedIndex]";

此行会将字符串设置为 style。 请改用上面行返回的值。

用 element.style.opacity = opak.options[opak.selectedIndex];

Answer 3

这个

是正确的：

//zoom
function zoom() {
  var zooM=document.getElementById("zoom");
  document.getElementById("bbtop").style.height=zooM.options[zooM.selectedIndex].value;
  document.getElementById("bg").style.height=zooM.options[zooM.selectedIndex].value;
}
//opacity
function opak() {
  var opak=document.getElementById("opacity");
  var element = document.getElementById("bg");
  var opacityValue = opak.options[opak.selectedIndex].value;
  element.style.opacity = opacityValue;
  element.style.filter  = "alpha(opacity=" + opacityValue * 100 + ")";
} 

编辑 ：请注意，我假设您要设置 #bg 元素的不透明度，因为#bbtop元素中没有图像。