尝试从下拉列表中的数据调用函数

首先，您在放置 } 时有一个错误(如 Naveen 已经指出的那样(，这会从函数中删除您的 if/else 块(导致错误，因为a随后在评估该块的位置undefined。

此外，分配事件处理程序的按钮的 HTML：

<input type=button value="Adjust Image" onchange="myfunction()">

type="button"的input没有onchange/change事件;尽管它确实有click/onclick：

<input type=button value="Adjust Image" onclick="myfunction()">

然后，你似乎必须混淆你调用函数的地方：

Select Shows:    |    selectedIndex is: | You call:        | Should (probably) call:
-----------------+----------------------+------------------+-------------------------
Larger           |    0                 | moveImage()      |  makeLarger()
Smaller          |    1                 | makeinvisible()  |  makesmaller()
Move             |    2                 | makelarger()     |  moveimage()
Invisible        |    3                 | makesmaller()    |  makeinvisible()

之后，您尝试调整大小(以 makesmaller() 和 makelarger() 为单位(，使用 节点本身的属性：image.height 和 image.width 。这些不是图像的属性，而是图像的style属性，应该是：

image.style.width = '1000';
image.style.height = '1000';

当然，这些属性值需要一个单位，因此您还需要添加px：

image.style.width = '1000px';
image.style.height = '1000px';

给：

function myfunction() {
    var selection = document.getElementById('changes');
    var a = selection.selectedIndex;
    if (a === 0) {
        makelarger();
    } else if (a == 1) {
        makesmaller();
    } else if (a == 2) {
        moveimage();
    } else if (a == 3) {
        makeinvisible();
    }
}

function moveimage() {
    var x = document.getElementById('image');
    x.style.marginTop = "50px";
}
function makeinvisible() {
    var x = document.getElementById('image');
    x.style.visibility = "hidden";
}
function makelarger() {
    var x = document.getElementById('image');
    image.style.width = "1000px";
    image.style.height = "1000px";
}
function makesmaller() {
    var x = document.getElementById('image');
    image.style.width = "100px";
    image.style.height = "100px";
}

JS小提琴演示。

现在，到改进。

if/else过于昂贵，您需要多次重新评估相同的变量。为了节省时间，请改用switch() {...}，它会计算一次变量：

switch (a) {
    case 0:
        makelarger();
        break;
    case 1:
        makesmaller();
        break;
    case 2:
        moveimage();
        break;
    case 3:
        makeinvisible();
        break;
}

JS小提琴演示。

使用switch将检查每个案例(包括第一个匹配案例之后的案例(，因此break很重要，以便强制跳过后续检查并退出switch。

也不需要在切换之前创建两个变量(特别是因为之后您不使用它们(，因此您也可以简单地执行以下操作：

function myfunction() {
    switch (document.getElementById('changes').selectedIndex) {
        case 0:
            makelarger();
            break;
        case 1:
            makesmaller();
            break;
        case 2:
            moveimage();
            break;
        case 3:
            makeinvisible();
            break;
    }
}

JS小提琴演示。

此外，内联事件处理程序(尝试使用onchange并随后在我的更新中使用onclick(的做法很差，因为它会导致"突兀的 JavaScript"，这很难维护，因此我们将事件处理程序移动到 JavaScript 本身，在为相关元素提供id(通过它可以轻松定位它

<input id="buttonElem" type=button value="Adjust Image" />
document.getElementById('buttonElem').addEventListener('click', myfunction);

JS小提琴演示。

因为 IE addEventListener()在 IE 中没有得到很好的支持，直到我认为版本 10，但是，您可能更喜欢使用(在 input 上使用相同的id(：

document.getElementById('buttonElem').onclick = myfunction;

JS小提琴演示。

当然，您也可以使用这些索引和函数的映射，而不是维护适当的索引到函数的switch：

var funcMap = {
    0 : makelarger,
    1 : makesmaller,
    2 : moveimage,
    3 : makeinvisible
};
    function myfunction() {
        var select = document.getElementById('changes');
        funcMap[select.selectedIndex]();
    }

JS小提琴演示。

这可能允许您将不同的对象传递给函数，该函数允许多个元素调用同一函数，并根据传入的映射调用不同的辅助函数(在这种情况下，它的用途有限，因为您只有一个select元素调用该函数;但对于将来的使用，值得记住(。

但是，最好确保该映射中有一个与我们正在使用的键相关的函数或属性;因此我们可以将之前的JavaScript调整为：

    function myfunction() {
        var select = document.getElementById('changes');
        if (funcMap.hasOwnProperty(select.selectedIndex)) {
            funcMap[select.selectedIndex]();
        }
    }

JS小提琴演示。

当然，在这一点上，我们正在重复一个早期的错误，并重新评估同样的事情两次(select.selectedIndex(，所以：

function myfunction() {
    var selected = document.getElementById('changes').selectedIndex;
    if (funcMap.hasOwnProperty(selected)){
        funcMap[selected]();
    }
}

JS小提琴演示。

您放错了myfunction()的闭合右大括号}

function myfunction()
{
   var selection = document.getElementById('changes');
   var a = dropdown1.selectedIndex;
   if (a ==0)
   {
     moveimage();
   }
   else if (a ==1)
   {
     makeinvisible();
   }
   else if (a ==2)
  {
    makelarger();
  }
  else if (a ==3)
  {
    makesmaller();
  }
}
function moveimage()
{
    var x = document.getElementById('image');
    x.style.marginTop="50px";
}
function makeinvisible()
{
    var x = document.getElementById('image');
    x.style.visibility="hidden";
}
function makelarger()
{
    var x = document.getElementById('image');
    image.width="1000px";
    image.height="1000px"
}
function makesmaller()
{
    var x = document.getElementById('image');
    image.width="100px";
    image.height="100px"
}