[英]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.