Javascript dropdown menu to change HTML

Question

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?

You're setting width / opacity / filter with those exact strings : "zooM.options[zooM.selectedIndex]", "opak.options[opak.selectedIndex]" — Michel
– Michel, Commented Dec 24, 2013 at 17:39
Ok... so I would make it not do that by taking off the quotation marks? — jaksco
– jaksco, Commented Dec 24, 2013 at 17:43

Indi · Accepted Answer · 2013-12-24 17:41:50Z

1

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

answered Dec 24, 2013 at 17:41

Indi

33.9k7 gold badges61 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lavneet · Accepted Answer · 2013-12-24 17:43:41Z

0

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

answered Dec 24, 2013 at 17:43

Lavneet

6268 silver badges20 bronze badges

Comments

Michel · Accepted Answer · 2013-12-24 18:07:04Z

0

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.

answered Dec 24, 2013 at 18:07

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Collectives™ on Stack Overflow

Javascript dropdown menu to change HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related