简单JavaScript警报不会显示_Javascript_Html

简单JavaScript警报不会显示

javascript html

简单JavaScript警报不会显示,javascript,html,Javascript,Html,除我的计算功能外，所有功能都正常工作，警报不会显示。我似乎无法理解为什么。如果我删除了函数中除第一个var和chat alert to alert（fname）之外的所有代码；它会起作用的。但当我添加任何其他变量时都不会 <pre> <code> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> &

除我的计算功能外，所有功能都正常工作，警报不会显示。我似乎无法理解为什么。如果我删除了函数中除第一个var和chat alert to alert（fname）之外的所有代码；它会起作用的。但当我添加任何其他变量时都不会

<pre> <code>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>***********</title>


        <script type="text/javascript">



        function calculate(){

        var fname = document.getElementById("fname").value;
        var lname = document.getElementById("lname").value;
        var cyear = 2014;
        var yob = document.getElementById("yob").value;

        alert(fname+" "+lname+", this year you will be "
+(cyear - Number(yob)) + "years old!");

        }

        </script>   

        <style type="text/css"> 

        form {background-color:#B18CE8;
              width:500px;
              margin-top: 50px;
              margin-left: auto;
              margin-right:auto;
              font-family: Arial, sans-serif; padding: 20px;
              box-shadow:10px 10px #333333;
                    /*h-shadow(r) v-shadow(r) blur(o) spread(o) color(o) inset(o)*/
                    /*(r)means required attribute, (o) means optional attribute*/
            }
        fieldset {  border: none; border-radius:10%; background-color:#ffff19}
        fieldset legend {padding:5px; border-radius: 50%; background-color:#0099ff;}            

        .labelWidth100 {float:left; display:block; width:100px; clear:left;}            

        </style>

    </head> 
        <body onload="fname.focus();">
            <form>



                <fieldset style="width:450px"><legend>Name</legend>
                    <label for="fname" class="labelWidth100">First name:</label>
                        <input type="text" name="fname" id="fname"><br><br>
                    <label for="lname" class="labelWidth100">Last name:</label>
                        <input type="text" name="lname" id="lname"><br><br>
                    <label for="yob" class="labelWidth100">Year of Birth:</label>
                        <input type="text" name="yob" id="yob"><br>
                </fieldset><br>


                <button type="button" onclick="calculate();">Calculate</button>

            </form>
            <br>

            <footer style="border:2px solid black; margin-left:0px; text-align:left;">
            <script type="text/javascript">
                document.write("This page was last modified: " + document.lastModified);
            </script>
            </footer><!--close footer-->


    </body>
</html> 

<pre> <code>

没有id“lname”。。。但这里有“Lname”。Javascript在此错误处停止，因此无法执行其余代码。

末尾缺少括号：

因为您的姓氏Id是“Lname”，在javascript中，您使用的是不存在的“Lname”

您需要修复警报功能，您缺少关闭函数调用

姓氏选择器中使用的id错误

PD：请学习如何使用javascript控制台。我没有发布代码，因为我认为即使在我回答您的问题时，您也需要找出如何修复它。

查看控制台时，您是否有任何JS错误。您没有ID为

lname

的元素。另请参见（是的，您缺少括号，这实际上会导致语法错误，正如您在控制台中看到的）。注意

转换为数字，因此不需要

数字。并且不要使用文档。编写，查看中的警告，改用DOM方法。即使添加）它仍然不会显示。我还更改了“”的名称“所以它不是指向正确的文本框。但警报仍然无法显示。me编辑器只是记事本+++@user2951100，与编辑器无关。如果打开浏览器的控制台，您将看到错误所在。我不知道notepadd++有控制台。@user2951100否，您浏览器的控制台。例如，在Firefox中，ctrl+shift+k
（网络控制台）或ctrl+shift+j（浏览器控制台）。没有人知道有这样的功能。但它向我展示了我所缺少的东西，我现在已经开始工作了。非常感谢。即使修复了这个，它仍然不会显示
document.getElementById("lname").value;

alert(
    fname
    +" "
    +lname
    +", this year you will be "
    +(cyear - Number(yob))
    + "years old!"
); /* This closing parenthesis was missing!! */