Question

我创建了一个带HTML的按钮，我正在尝试运行一个用JavaScript编程的函数。我无法使该功能工作并收到错误消息：

引用错误：myFunction未定义

这是我的代码。任何人都可以帮我定义这个功能吗？

....<button type="button" onclick="myFunction(shot)">...

<script lang="JavaScript">
var shot = Math.random();

if (shot < .001) {
    shot = 1;
} else if (shot < .18) {
    shot = 2;
} else if (shot < .5) {
    shot = 3;
} else if (shot < .84) {
    shot = 4;
} else if (shot < .94) {
    shot = 5;
} else if (shot < .991) {
    shot = 6;
} else {
    shot = 7;
};

function myFunction(x) {
    if (x === 1) {
        console.log("-2");
    } else if (x === 2) {
        console.log("-1");
    } else if (x === 3) {
        console.log("0");
    } else if (x === 4) {
        console.log("+1");
    } else if (x === 5) {
        console.log("+2");
    } else if (x === 6) {
        console.log("+3");
    } else {
        console.log("+4");
    }
};
</script>

Answer 1

这很可能是因为脚本位于HTML中的<button>之后。把它放在上面，一切都应该没问题。

Answer 2

由于您的按钮位于脚本之前，因此该按钮无法识别您的功能。当您按下按钮时，功能尚未定义。您必须放置按钮的脚本。

最好将type="text/javascript"放在<script>代码中。

您的脚本将是这样的：

<script type="text/javascript">
var shot = Math.random();
if (shot < .001) {
    shot = 1;
} else if (shot < .18) {
    shot = 2;
} else if (shot < .5) {
    shot = 3;
} else if (shot < .84) {
    shot = 4;
} else if (shot < .94) {
    shot = 5;
} else if (shot < .991) {
    shot = 6;
} else {
    shot = 7;
};

function myFunction(x) {
    if (x === 1) {
        console.log("-2");
    } else if (x === 2) {
        console.log("-1");
    } else if (x === 3) {
        console.log("0");
    } else if (x === 4) {
        console.log("+1");
    } else if (x === 5) {
        console.log("+2");
    } else if (x === 6) {
        console.log("+3");
    } else {
        console.log("+4");
    }
};
</script>

<button type="button" onclick="myFunction(shot)">

Answer 3

我认为调用你的按钮onClick方法会产生问题。

<button type="button" onclick="myFunction(shot)">

在代码中的那一点，未定义 shot 变量。您需要在使用前首先声明变量。或者更好的是从按钮调用中删除它并在myFunction中定义它，如下所示：

<script type="text/javascript">
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function getShot() {
    return getRandomInt(1, 7);
  }

function myFunction() {
   var x  = getShot();
    if (x === 1) {
        console.log("-2");
    } else if (x === 2) {
        console.log("-1");
    } else if (x === 3) {
        console.log("0");
    } else if (x === 4) {
        console.log("+1");
    } else if (x === 5) {
        console.log("+2");
    } else if (x === 6) {
        console.log("+3");
    } else {
        console.log("+4");
    }
};
</script>

Answer 4

我是用jQuery做的：

var shot;
$(document).ready(function () {
    shot = Math.random();

    if (shot < 0.001) {
        shot = 1;
    } else if (shot < 0.18) {
        shot = 2;
    } else if (shot < 0.5) {
        shot = 3;
    } else if (shot < 0.84) {
        shot = 4;
    } else if (shot < 0.94) {
        shot = 5;
    } else if (shot < 0.991) {
        shot = 6;
    } else {
        shot = 7;
    }
});

$("#myButton").click(function () {
    var x = shot;
    if (x === 1) {
        console.log("-2");
    } else if (x === 2) {
        console.log("-1");
    } else if (x === 3) {
        console.log("0");
    } else if (x === 4) {
        console.log("+1");
    } else if (x === 5) {
        console.log("+2");
    } else if (x === 6) {
        console.log("+3");
    } else {
        console.log("+4");
    }
});

按下按钮：

<button id="myButton" type="button">Test</button>

演示here

但是，除非你在点击功能中对'shot'进行计算，否则每页加载的结果都是相同的！

Answer 5

您可以将代码放在按钮之前

或

使用

使DOM加载后执行脚本

document.addEventListener("DOMContentLoaded", function(event) { 
 //put your function here
 });

另外，一个好的做法（分离关注），就是没有对html进行函数调用。相反，您可以在javascript中添加一个事件监听器。

document.getElementById("myButton").addEventListener("click", function(){
// your function here
});

任何人都可以帮我正确定义JS中的函数吗？

5 个答案: