CODEWITHSUNDEEP
javascripthtml
jaksco
jaksco

Reputation: 532

Javascript dropdown menu to change HTML

I'm trying to add some interactive controls to this: http://jakscoproductions.com/2520dip8/

Here's the code specifically: 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]";
}

What am I doing wrong?

Upvotes: 1

Views: 393

Answers (3)

Michel
Michel

Reputation: 28239

This one is correct : 

//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 + ")";
}

Edit : please note I assumed you want to set the opacity of the #bg element, as there is no image in the #bbtop element.

Upvotes: 0

Lavneet
Lavneet

Reputation: 626

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

This line will set the string as style. use value returned by above line instead.

use element.style.opacity = opak.options[opak.selectedIndex]; instead

Upvotes: 0

Kaf
Kaf

Reputation: 33809

Remove the string literal and assign the text (or value) property of the selected option as below. 

//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;
}

Upvotes: 1

Related Questions