繁体   English   中英

为什么这个 output 什么都没有?

[英]Why won't this output anything?

出于某种原因,我似乎无法将该程序安装到 output 并且也想不出我可能做错了什么。 我已经在几个不同的浏览器中尝试过,并且一直得到相同的结果,但没有任何反应

 <html> <title>Activity</title> <head> <script type="text/javascript"> function outputData(studentData) { var studentFirstName = studentData.firstname.value; var studentLastName = studentData.lastname.value; var studentAge = studentData.age.value; var sA = document.GetElementById("A").checked; var sWR = document.GetElementById("WR").checked; var sC = document.GetElementById("C").checked; var sP = document.GetElementById("P").checked; document.write("" + studentFirstName + "</br>" + studentLastName + "</br>" + studentAge + "</br>"); if (sA) document.write("" + Anthropology + "</br>"); if (sWR) document.write("" + World Religion + "</br>"); if (sC) document.write("" + Criminology + "</br>"); if (sP) document.write("" + Philosophy + "</br>"); } </script> </head> <p>Enter Student Details</br></p> <form name="studentData" action="" method="GET"> First name:<input type="text" name="firstname" value=""><br> <br>Last name:<input type="text" name="lastname" value=""><br> <br>Age:<input type="text" name="age" value=""><br><br> Select your choice of subjects:<br> <input type="checkbox" id="A" name="subject" value="Anthropology">Anthropology<br> <input type="checkbox" id="WR" name="subject" value="World Religion">World Religion<br> <input type="checkbox" id="C" name="subject" value="Criminology">Criminology<br> <input type="checkbox" id="P" name="subject" value="Philosophy">Philosophy<br> <input type="button" value="Submit" onClick="outputData(this.form)"><br> </form> </html>

抱歉,如果这有一个非常简单的解决方案,我才刚刚开始学习 HTML。

您的代码中有一些错误:

  • function GetElementByID实际上应该是getElementById
  • document.write()中的Anthropology是一个字符串,应该这样对待。 请参阅下面的代码。
  • 您还缺少 body 标签

    <html> <title>Activity</title> <head> <script type = "text/javascript"> function outputData(studentData){ var studentFirstName = studentData.firstname.value; var studentLastName = studentData.lastname.value; var studentAge = studentData.age.value; var sA = document.getElementById("A").checked; var sWR = document.getElementById("WR").checked; var sC = document.getElementById("C").checked; var sP = document.getElementById("P").checked; document.write("" + studentFirstName + "</br>" + studentLastName + "</br>" + studentAge + "</br>"); if(sA) document.write("Anthropology</br>"); if(sWR) document.write("World Religion</br>"); if(sC) document.write("Criminology</br>"); if(sP) document.write("Philosophy</br>"); } </script> </head> <body> <p>Enter Student Details</br></p> <form name = "studentData" action = "" method = "GET"> First name:<input type = "text" name = "firstname" value = ""><br> <br>Last name:<input type = "text" name = "lastname" value = ""><br> <br>Age:<input type = "text" name = "age" value = ""><br><br> Select your choice of subjects:<br> <input type = "checkbox" id = "A" name= "subject" value = "Anthropology">Anthropology<br> <input type = "checkbox" id = "WR" name= "subject" value = "World Religion">World Religion<br> <input type = "checkbox" id = "C" name="subject" value ="Criminology">Criminology<br> <input type = "checkbox" id = "P" name="subject" value ="Philosophy">Philosophy<br> <input type = "button" value = "Submit" onClick = "outputData(this.form)"><br> </form>


如果您想获取复选框的值,请使用以下 JS(而不是在script标签中):

 function outputData(studentData){

        var studentFirstName = studentData.firstname.value;
        var studentLastName = studentData.lastname.value;
        var studentAge = studentData.age.value;

        var sA = document.getElementById("A");
        var sWR = document.getElementById("WR");
        var sC = document.getElementById("C");
        var sP = document.getElementById("P");

        document.write("" + studentFirstName + "</br>" 
                          + studentLastName  + "</br>" 
                          + studentAge       + "</br>");

        if(sA.checked) document.write("" + sA.value + "</br>");

        if(sWR.checked) document.write("" + sWR.value + "</br>");

        if(sC.checked) document.write("" + sC.value + "</br>");

        if(sP.checked) document.write("" + sP.value + "</br>");
}

不确定这是否是您唯一的问题,但您在</head>标记之后缺少<body> ... </body>标记。

您的代码格式存在几个问题( GetElementById应该是getElementById ,缺少<body>等)。 但我觉得阻止您的代码运行的原因是您将字符串视为条件中的变量。

if (sWR) document.write("" + World Religion + "</br>");

应该引用...

if (sWR) document.write("" + 'World Religion' + "</br>");

此外,对每一行都使用<br>是一种懒惰的做事方式。 您确实应该构建正确的 HTML 并根据您需要的布局正确包装您的元素。 始终将<label>与您的<input>标签配对,并利用 CSS 为您带来优势。

查看 bootstrap 库,因为它使 forms 的样式更容易,并且具有许多其他功能。

看看下面的最终产品......

 .form-title { font-size: 14px; font-weight: bold; }.selection { margin: 10px 0; font-weight: bold; }.input-group>label, .input-group>input { margin: 5px 0; display: inline-block; }.submit-button { margin: 10px 0; }
 <html> <title>Activity</title> <head> <script type="text/javascript"> function outputData(studentData) { var studentFirstName = studentData.firstname.value; var studentLastName = studentData.lastname.value; var studentAge = studentData.age.value; var sA = document.getElementById("A").checked; var sWR = document.getElementById("WR").checked; var sC = document.getElementById("C").checked; var sP = document.getElementById("P").checked; document.write("" + studentFirstName + "</br>" + studentLastName + "</br>" + studentAge + "</br>"); if (sA) document.write("" + 'Anthropology' + "</br>"); if (sWR) document.write("" + 'World Religion' + "</br>"); if (sC) document.write("" + 'Criminology' + "</br>"); if (sP) document.write("" + 'Philosophy' + "</br>"); } </script> </head> <body> <p class="form-title">Enter Student Details</p> <form name="studentData" action="" method="GET"> <div class="input-group"> <label>First name:</label> <input type="text" name="firstname" value=""> </div> <div class="input-group"> <label>Last name:</label> <input type="text" name="lastname" value=""> </div> <div class="input-group"> <label>Age:</label> <input type="text" name="age" value=""> </div> <div class="selection"> Select your choice of subjects: </div> <div class="input-group"> <input type="checkbox" id="A" name="subject" value="Anthropology"> <label>Anthropology</label> </div> <div class="input-group"> <input type="checkbox" id="WR" name="subject" value="World Religion"> <label>World Religion</label> </div> <div class="input-group"> <input type="checkbox" id="C" name="subject" value="Criminology"> <label>Criminology</label> </div> <div class="input-group"> <input type="checkbox" id="P" name="subject" value="Philosophy"> <label>Philosophy</label> </div> <input type="button" value="Submit" onClick="outputData(this.form)" class="submit-button"> </form> </body> </html>

  1. 将 GetElementById 更改为getElementById
  2. 使用复选框值而不是手动输入。

var sA = document.getElementById("A");

这将获得输入值 field/console.log(sA) - 您将看到其中的值

if(sA.checked) document.write("" + sA.value + "");

活动

<head>

    <script type = "text/javascript">

        function outputData(studentData){

            var studentFirstName = studentData.firstname.value;

            var studentLastName = studentData.lastname.value;

            var studentAge = studentData.age.value;

            var sA = document.getElementById("A");

            var sWR = document.getElementById("WR");

            var sC = document.getElementById("C");

            var sP = document.getElementById("P");

            document.write("" + studentFirstName + "</br>" + studentLastName + "</br>" + studentAge + "</br>");

            if(sA.checked) document.write("" + sA.value + "</br>");


            if(sWR.checked) document.write("" + sWR.value + "</br>");

            if(sC.checked) document.write("" + sC.value + "</br>");

            if(sP.checked) document.write("" + sP.value + "</br>");
        }

    </script>

</head>

<p>Enter Student Details</br></p>

<form name = "studentData" >

    First name:<input type = "text" name = "firstname" value = ""><br>

    <br>Last name:<input type = "text" name = "lastname" value = ""><br>

    <br>Age:<input type = "text" name = "age" value = ""><br><br>

    Select your choice of subjects:<br>

    <input type = "checkbox" id = "A" name= "subject" value = "Anthropology">Anthropology<br>

    <input type = "checkbox" id = "WR" name= "subject" value = "World Religion">World Religion<br>

    <input type = "checkbox" id = "C" name="subject" value ="Criminology">Criminology<br>

    <input type = "checkbox" id = "P" name="subject" value ="Philosophy">Philosophy<br>

    <input type = "button" value = "Submit" onClick = "outputData(this.form)"><br>

</form>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM