stackoom
  简体   繁体   中英

Why won't this output anything?

 原文  2019-10-16 04:25:38  0   4    javascript

Question

For some reason I can't seem to get this program to output and also can't think of what I might have done wrong. I've tried it in a few different browsers and keep getting the same result, which is nothing happens

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

Sorry if this has a really simple solution, I'm only just started learning HTML.

4 answers

solution1
 0  2019-10-16 04:36:02

You have a few errors in your code:

  • The function GetElementByID should actually be getElementById .
  • The Anthropology in your document.write() is an string and should be treated as such. See the code below.

  • You are also missing the body tag

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

If you wanted to get the values of the checkboxes instead then use the following JS (in the script tag instead):

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

solution2
 0  2019-10-16 04:37:55

Not sure if it is your only problem, but you are missing <body> ... </body> tags, after your </head> tag.

solution3
 0  2019-10-16 05:29:41

There are several issues with your code formatting ( GetElementById should be getElementById , missing <body> , etc). But I feel like what is preventing your code from running, is the fact that you are treating strings as a variable in your conditions.

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

Should be quoted...

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

Also, using <br> for every line is a lazy way of doing things. You should really be building proper HTML and wrapping your elements correctly based on the layout you need. Always pair <label> with your <input> tags, and leverage CSS to your advantage.

Look into the bootstrap library because it makes styling forms much easier and has a lot of other capabilities.

Take a look at the final product below... 

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

solution4
 -1  2019-10-16 04:51:23

  1. Change GetElementById to getElementById
  2. use checkbox value instead of typing it manually.

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

This will get the input value field/console.log(sA) - you will see the values in there

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

Activity

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Why won't this script do anything in IE Why local browser won't show anything? Why doesn't this piece of code output anything? Why @Output doesn't emit anything (in angular 8) Why doesn't the javascript output anything? Javascript true or false test won't output anything XSL “for-each” using Javascript ID won't output anything Why won't function output into this jQuery selector? PointLight won't illuminate anything Why doesn't react output anything to the console when input is submited?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM