меню 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]"; 

Эта строка будет установить строку как стиль. вместо этого используйте значение, возвращаемое указанной строкой.

использование 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 элемент.