Question

我有一个Javascript代码块，但我不知道如何激活它。我希望用HTML按钮激活它，但我不知道是否可能。我刚开始编码= P

以下是代码：

var randomFlavour = Math.random() * 10;

if (randomFlavour < 1) {
    var randomFlavour = "chocolate";
} else if (randomFlavour < 2) {
    var randomFlavour = "vanilla";
} else if (randomFlavour < 3) {
    var randomFlavour = "pistachio";
} else if (randomFlavour < 4) {
    var randomFlavour = "strawberry";
} else if (randomFlavour < 5) {
    var randomFlavour = "cotton candy";
} else if (randomFlavour < 6) {
    var randomFlavour = "cookie dough";
} else if (randomFlavour < 7) {
    var randomFlavour = "bubblegum";
} else if (randomFlavour < 8) {
    var randomFlavour = "peanut butter";
} else if (randomFlavour < 9) {
    var randomFlavour = "mint";
} else {
    var randomFlavour = "gingerbread man";
}

console.log("Hello. I would like to have" + " " + randomFlavour + " " + "ice cream please.");

Answer 1

更干净的方法可能是做这样的事情：

flavors = [
    'strawberry',
    'apple'];

function getRandomFlavor()
{
    random_index = Math.floor(Math.random() * flavors.length);
    return flavors[random_index];
}

console.log(getRandomFlavor());

http://jsfiddle.net/Bm345/1/

Answer 2

要在单击按钮时执行功能，首先需要一个按钮：

<子> HTML：

<button type="button">Click this button!</button>

然后，您需要将事件侦听器附加到按钮。对于初学者，你经常会看到如何使用[onclick]属性进行内联，但这绝对是一种糟糕的练习，而且不是一个好习惯。如果你要内联添加一个事件处理程序，你必须每次想要做一些像更改事件处理程序名称这样简单的事情时，都要更新所有这些内容。这对于维护来说是乏味且可怕的。

通过JavaScript绑定事件可以更加轻松。你可以用几种不同的方式做到这一点。最好的是使用addEventListener（或使用addEventListener的库，例如使用jQuery.fn.on）：

<子> JS：

//this line of code tells the `buttonVariable` element to call the
//`callbackFunction` when the button is clicked
buttonVariable.addEventListener('click', callbackFunction, false);

另一种方法是使用onclick属性：

buttonVariable.onclick = callbackFunction;

要使该代码生效，您需要选择<button>元素，并创建callbackFunction函数：

//declare the variable
var buttonVariable;
//declare the function
function callbackFunction () {
    ...do stuff...
}
//select the button
buttonVariable = document.querySelector('button');
//bind the function to the button for click events
buttonVariable.addEventListener('click', callbackFunction, false);

同样重要的是要注意，在 <button>添加到DOM之后，脚本必须执行。 JavaScript脚本同步执行：

<script> var btn; //this returns null because the script executes before //the button element exists btn = document.querySelector('button'); </script> <button type="button">Click this button!</button> <script> var btn; //this returns an HTMLButtonElement object btn = document.querySelector('button'); </script>

Here's a working example on jsfiddle.

Answer 3

将js代码包装在一个函数中。设置按钮的onclick监听器以调用您的功能。

<html>
    <head>
        <script>
            function myFunction() {
                ... all of your javascript code ...
            }
        </script>
    </head>
    <body>
        <button onclick="myFunction()">My Button</button>
    </body>
</html>

激活javascript代码块

3 个答案: