【问题标题】：How to make a button show an alert box in my html document?如何使按钮在我的 html 文档中显示警告框？
【发布时间】：2014-10-05 00:26:39
【问题描述】：

我正在尝试让一个按钮显示一个警告框。基本上，您在输入表单中写一些东西，然后单击一个按钮以显示一个警告框，其中包含您在其中写的内容。你可以在jsfiddle看到它。

我的代码如下所示：

HTML：

<!DOCTYPE html>
<html>

    <head>
        <link rel='stylesheet' type='text/css' href='style.css' />
        <script type='text/javascript' src='script.js'></script>
    </head>

    <body>
        <div class="myblock">
            <div id="left"></div>
            <div id="center">
                <form>
                    <input type="text" name="a" value="Type your word here!">
                </form>
                <button><strong>Alert!</strong>

                </button>
            </div>
            <div id="right"></div>
        </div>
    </body>

</html>

CSS：

.myblock {
    margin-top:60px;
    height:20%;
    width:100%;
}
#left {
    height:100px;
    width:33%;
    top:50%;
    margin-top:-50px;
    float:left;
    position:relative;
    background-color:green
}
#center {
    height:100px;
    width:33%;
    top:50%;
    margin-top:-50px;
    float:left;
    position:relative;
    background-color:red
}
#right {
    height:100px;
    width:33%;
    top:50%;
    margin-top:-50px;
    float:left;
    position:relative;
    background-color:blue
}
form {
    font-size: 12px;
    font-family: Verdana, Arial, Sans-Serif;
    display: inline-block;
    margin-left:50px;
}
button {
    height:35px;
    width:70px;
    margin-top: 25px;
    border-radius:5px;
}

JavaScript：

这是我认为我弄错的部分

$(document).ready(function () {
    $("button").click(function () {
        var word = $("input[name=a]").val();
        alert(word);
    });
})

那么为什么它不起作用？我不知道我做错了什么。

【问题讨论】：

You don't appear to be including the jQuery library (put it into your HTML)
控制台显示什么错误？正如@scrowler 所说，您可能会忘记包含 jquery 库。
哦，是的，我的 HTML 中没有包含 jQuery 库。哇，原来如此简单。谢谢大家的回复！
是的，您的代码存在多个问题，但您可以继续。 jsfiddle.net/r3wt/x8jejp3a/7

标签： javascript jquery html css alert

【解决方案1】：

为什么不使用 javascript？

在按钮上添加onclick="functionName()"，然后

functionName() {
var word = document.getElementsByName('a').value;
alert(word);
};

【讨论】：

【解决方案2】：

使用JS fiddle 引用 for your better understandings.

我已经用文本框中的值发出警报。我也使用了placeholder，而不是默认在文本框中输入字符串。

【讨论】：

【解决方案3】：

你还没有include Jquery 库：

$(document).ready(function () {
    $("button").click(function () {
        var word = $("input[name=a]").val();
        alert(word);
    });
}); //added

Updated DEMO: 演示已经包含 jquery 库

Debugging JavaScript

我认为您应该使用 在此处输入您的单词！placeholder

<input type="text" name="a" value="" placeholder="Type your word here!">

【讨论】：

谢谢！这解决了我的问题，您的建议确实使用占位符更优雅。
@wessy 有一个很棒的 jquerying。 :)

【解决方案4】：

你可能已经忘记了其中之一。

包含 jQuery 库
正确关闭$(document).ready()。

再次检查。

$(document).ready(function () {
    $("button").click(function () {
        var word = $("input[name=a]").val();
        alert(word);
    });
});

DEMO

【讨论】：

【解决方案5】：

这里有两个问题。

你的 jsfiddle 中没有加载 jQuery
您缺少结束符 });

要在 jsfiddle 中加载 jquery，屏幕左上角有一个下拉菜单，可让您加载库。选择 jquery 后，您可以再次单击“运行”按钮。

但是，您仍然需要修复您的代码；）

$(document).ready(function () {
    $("button").click(function () {
        var word = $("input[name=a]").val();
        alert(word);
    });
}); // You missed this here

【讨论】：

【解决方案6】：

你错过了结束符号：

$(document).ready(function () {
    $("button").click(function () {
        var word = $("input[name=a]").val();
        alert(word);
    });
**});**

这里是jsfiddle

【讨论】：

【解决方案7】：

你没有关闭你的ready函数，应该是：

$(document).ready(function () {
  $("button").click(function () {
    var word = $("input[name=a]").val();
    alert(word);
  });
 }); // Add this line here

除了在你的 jsfiddle 中包含或启用 JQuery，因为你正在使用一个。

【讨论】：