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