为什么不输出任何内容？

时间：2019-10-16 04:25:38

标签： javascript

由于某种原因，我似乎无法使该程序输出，也无法想到我做错了什么。我已经在几种不同的浏览器中进行了尝试，并获得了相同的结果，但没有任何反应

<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。

4 个答案:

答案 0 :(得分：0)

您的代码中有一些错误：

  • 函数GetElementByID实际上应该是getElementById。
  • 您的Anthropology中的document.write()是一个字符串，应这样对待。请参见下面的代码。

  • 您还缺少身体标签

    <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>");
}

答案 1 :(得分：0)

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

答案 2 :(得分：0)

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

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

应被引用... 

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

此外，每行使用<br>是一种懒惰的处理方式。您确实应该构建适当的HTML，并根据所需的布局正确包装元素。始终将<label>与<input>标签配对，并充分利用CSS的优势。

请查看引导程序库，因为它使样式表单更加容易并且具有许多其他功能。

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

.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>

答案 3 :(得分：-1)

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

var sA = document.getElementById（“ A”）;

这将获得输入值字段/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>

相关问题
最新问题