Question

我试图从下拉列表中选择一个函数。只是基本功能对图像进行更改..我被告知从传递数据到函数做到这一点..但我无法弄清楚它工作，所以我试图使用一个if。不确定wats错了？我是语言的新手

<!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>

Answer 1

首先，您在}的展示位置中出现了错误（正如Naveen所述），这会从您的函数中移除if / else块（导致错误，因为然后a在评估此块的位置undefined。

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

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

input type="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()

之后，您尝试使用节点本身的属性调整尺寸（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 Fiddle demo

现在，改进。

if / else不必要地昂贵，您需要多次重新评估同一个变量。为了节省时间，请使用switch() {...}来代替变量一次：

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

JS Fiddle demo

使用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 Fiddle demo

此外，内联事件处理程序（尝试使用onchange并随后在我的更新中使用onclick）实践很差，因为它导致“突兀的JavaScript”，这很难维护，所以我们将事件处理程序移动到JavaScript本身，之后给相关元素id（通过它可以轻松地定位它）：

<input id="buttonElem" type=button value="Adjust Image" />

document.getElementById('buttonElem').addEventListener('click', myfunction);

JS Fiddle demo

因为在我认为版本10之前，IE中没有很好地支持addEventListener()，所以您可能更喜欢使用（id上的input）：

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

JS Fiddle demo

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

var funcMap = {
    0 : makelarger,
    1 : makesmaller,
    2 : moveimage,
    3 : makeinvisible
};

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

JS Fiddle demo

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

但是，最好确保在我们正在使用的密钥中有一个要调用的函数或该映射中的属性;所以我们可以将之前的JavaScript改编为：

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

JS Fiddle demo

当然，在这一点上，我们重复了之前的错误并重新评估了同样的事情两次（select.selectedIndex），所以相反：

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

JS Fiddle demo

Answer 2

您错位了}

的右大括号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"
}

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

2 个答案: