谁能帮助我在JS中正确定义一个函数？

Question

I have created a button with HTML and am trying to run a function I programmed with JavaScript. I cannot get the function to work and receive the error message:

reference error: myFunction is not defined

Here is my code. Can anyone help me define this function?

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

That is most likely because the script is after your <button> in your HTML. Place it above and everything should be fine.

Answer 2

Because your button is before your script the button doesn't know your function. When you press your button the function ins't defined yet. You have to place your script for the button.

Also it would be better to put type="text/javascript" in your <script> tag.

Your script would be like this:

<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

I believe it is the call to your button onClick method that makes the problem.

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

At that point in code the shot variable is not defined. You need to first declare the variable before usage. Or better yet remove it from button call and defined it in your myFunction as below:

<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

I'd do this using 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");
    }
});

With your button as so:

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

Demo here

With this, however, your result is going to be the same per page load unless you do the calculation for 'shot' in the click function!

Answer 5

You could either put the code before the button

or

Make the script to execute after the DOM loads by using

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

Also, a good practice (separation of concern), is to not have have the function call on the html. Instead you could add an event listener in your javascript.

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