Question

我创建了一个简单的成绩计算器，现在我只是在做一些小事情。一种是不允许用户不要在输入框中输入输入。一个可能的解决方案是包括html5 required属性。要使用此功能，我必须将代码放入W3Schools示例在此处编写的表单中。 HTML required Attribute。

在将其实现到我的代码中之前，它可以正常工作，并在屏幕上显示结果。我只想知道为什么表单不允许我的结果显示在屏幕上。

My code

    var Result;
    var Worth;
    var caPercentage;
    var gradeWanted;
    var examPercentage;
    var gradeWorth;
    var marksNeeded;

    //Calculates the Continous Assessment result based on users inputs 
    function calcCaPercentage() {
  
  	//result equals the users Continous Assesment results input value
	Result = parseFloat(document.getElementById("caResult").value);
  
  	//result equals over Continous Assesment Worth input value
	Worth = parseFloat(document.getElementById("caWorth").value);
	
	caPercentage = Worth * (Result / 100);
  
  	//CA Percentage result gets displayed here
	document.getElementById("caPercentage").innerHTML = caPercentage + "%";
  
  	//Returns the Continous Assessment Precentage for the other methods
	return caPercentage;
    }

    //Calcualtes the users exam percentage needed to get the grade they want
    function calcExamPercentage() {

  	//GradeWanted equals the grade the user wants     
	gradeWanted = parseFloat(document.getElementById("gradeWanted").value);
  
  	//x equals the Continous Assessment Precentage from the calcCaPercentage 
    function calcExamPercentage(){

	var x = calcCaPercentage();
	examPercentage = gradeWanted - x;
  
  	//Exam Percentage gets displayed here
	document.getElementById("examPercentage").innerHTML = examPercentage +"%";
  
  	//Returns the Exam Precentage for the other methods
	return examPercentage;
    }

    //Calculates the Marks needed for the user to get the grade they want
    function calcMarkNeeded() {

  	//gradeWorth equals what the overall Exam worth input
	gradeWorth = parseFloat(document.getElementById("gradeWorth").value);
  
  	//y equals the Exam Precentage from the calcExamPercentage function
	var y = calcExamPercentage();
  
  	//marksNeeded equals a round up version of the overall result
	marksNeeded = Math.floor((y / gradeWorth) * 100 /1);

  	//The marks needed will be displayed here
	document.getElementById("marksNeeded").innerHTML = marksNeeded + " Marks!";
    }

	<form>
		<div class="container">
		
			<div class="box boxInput1">

				<h4>Calculate your CA Percentage</h4>

				<p>Enter your CA Result: <input type="text" class="inputBox" placeholder="Enter you CA Result here.." id="caResult" required></p>
				

				<p>Enter overall CA mark: <input type="text" class="inputBox" placeholder="Enter what the CA is worth here.." id="caWorth" required></p>

				<!--
				<button type="submit" class="btn" onclick="calcCaPercentage()"> 
				<input type="submit" class="btn" onclick="calcCaPercentage()"> 
				-->

			</div>
			
			<div class="box boxResult boxInput1">
				<p><br>Your CA percentage is: <br><br><span id="caPercentage"></span></p>
			</div>
			
			<div class="box ">

				<h4>Calculate the percentage needed to pass the exam!</h4>

				<p>Enter the Grade you are aiming to achieve: <input type="text" class="inputBox" placeholder="Enter the Grade you want to get here.." id="gradeWanted" required></p>

				<!-- 
				<button type="button" class="btn" onclick="calcExamPercentage()">Calculate</button> 
				<input type="submit" class="btn" onclick="calcExamPercentage()">
				-->
			</div>
			
			<div class="box boxResult">
				<p><br>Percentage you need to pass the exam is: <br><br><span id="examPercentage"></span></p>
			</div>
			
			<div class="box">

				<h4>Calculate the marks needed to pass the exam!</h4>

				<p>Enter what your exam is worth overall: <br> <input type="text" class="inputBox" placeholder="Enter what the exam is worth here.." id="gradeWorth"></p>

				<input type="submit" class="btn" onclick="calcMarkNeeded()" required>
				<!-- <button type="button" class="btn"  onclick="calcMarkNeeded()">Calculate</button> -->

			</div>
			
			<div class="box boxResult">
				<p><br>You Need <br><br><span id="marksNeeded"></span></p>
			</div>
		
		</div>
  	
	</form>

这是我在Codepen中工作的代码的链接

使用表格是否有缺点？

Answer 1

只需将<input type="submit" class="btn" onclick="calcMarkNeeded()" required>更改为<input type="button" class="btn" onclick="calcMarkNeeded()">或<button class="btn" onclick=calcMarkNeeded()">Calculate</button>。

提交按钮会将表单提交给表单定义的任何（服务器）操作。但是没有服务器在监听您的提交，因此您的网站只会加载一个空白页面，而不是表单提交响应。并且空白页不包含您要向其中写入结果的输出div。

因此，除非您确实要提交表单，否则切勿使用<input type="submit">。可以使用<input type="button">甚至还有<button></button>元素。

此外，在按钮上使用required属性不会执行任何操作。按钮将被按下，而不是提交。您无法通过使用“强制”用户强制用户按下按钮，就像您可以“强迫”用户填写特定输入一样。

我的表单不允许点击显示我的结果

1 个答案: