誰能幫助我在JS中正確定義一個函數？

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

因為您的按鈕位於腳本之前，所以該按鈕不知道您的功能。 當您按下按鈕時，該功能尚未定義。 您必須為按鈕放置腳本。

另外，最好在您的<script>標記中type="text/javascript" 。

您的腳本將如下所示：

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

在這里演示

但是，這樣做的結果是，除非您在click函數中對“ shot”進行計算，否則每頁加載的結果將是相同的！

Answer 5

您可以將代碼放在按鈕之前

要么

通過使用以下命令使腳本在DOM加載后執行

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

另外，一個好的做法（關注點分離）是在html上沒有函數調用。 相反，您可以在JavaScript中添加事件監聽器。

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