Debugging JavaScript

Question

我试图让按钮显示警告框。基本上你在输入表单中写一些东西，然后你点击一个按钮来显示你在其中写的内容的警告框。您可以在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);
    });
})

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

Answer 1

为什么不使用javascript？

将onclick="functionName()"添加到按钮，然后

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

Answer 2

使用JS fiddle参考 for your better understandings。

我已使用文本框中的值提示警报。我也使用placeholder而不是默认情况下将字符串键入文本框。

Answer 3

您没有 include Jquery库：

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

Updated DEMO：demo包含了jquery库

enter image description here

Debugging JavaScript

我相信您应该使用在此输入您的字词！为placeholder

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

Answer 4

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

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

再次检查。

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

<强> DEMO

Answer 5

这里有两件事不对。

您还没有在jsfiddle中加载jQuery
你错过了一个结束}）;

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

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

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

Answer 6

你错过了关闭simbols：

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

这是jsfiddle

Answer 7

您没有关闭准备好的功能，它应该是：

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

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

如何让一个按钮在我的html文档中显示一个警告框？

HTML：

CSS：

的JavaScript：

7 个答案:

Debugging JavaScript