0

我试图从下拉列表中的选择中调用一个函数..只是对图像进行更改的基本函数..我被告知要从将数据传递给函数..但我无法弄清楚它是否可以正常工作我尝试使用 if。不知道错了吗？？我是这门语言的新手

<!DOCTYPE html>
<html>
<head>
    <title>Functions</title>
</head>
<body>
<script>
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="1000";
    image.height="1000";
}

function makesmaller(){
    var x = document.getElementById('image');
    image.width="100";
    image.height="100";
}

</script>

<form name="change">
    <img src = "cookie.jpg" id="image">
</br>
<select id="changes">
    <option value="0" >Larger</option>
    <option value="1">Smaller</option>
    <option value="2">Move</option>
    <option value="3">Invisible</option>
</select>
</br>
</br>
</br>
</br>

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

</select>

</body>
</html>
4

2 回答 2

2

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

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

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

一个inputoftype="button"没有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()

之后，您尝试使用节点本身的属性来调整大小（inmakesmaller()和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您要多次重新评估同一个变量。为了节省时间，请改用 a 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 小提琴演示。

因为addEventListener()在我认为版本 10 之前在 IE 中没有得到很好的支持，但是你可能更喜欢使用它（在 IE 上也一样id）input：

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 小提琴演示。

于 2013-10-09T20:20:15.567 回答
1

}你放错了闭合的右花括号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"
}
于 2013-10-09T19:41:04.900 回答