[英]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。
您的代碼中有一些錯誤:
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>
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.