时间戳

首页 > 解决方案 > 如何让 JS 函数从 HTML 按钮返回到标题？

javascript - 如何让 JS 函数从 HTML 按钮返回到标题？

问题描述

我正在为我的科学博览会制作一个乘法练习网站，我需要一些帮助。我希望网站显示用户输入与正确答案相比是正确还是错误。我想我对函数的编码是正确的，我知道用提交按钮来调用它。但是，我在访问该函数的返回时遇到了一些麻烦。函数返回到哪里以及如何访问它？

    		//get random integer
    		var num1 = Math.floor(Math.random() * (14 - 7 + 1) ) + 7;
    		var num2 = Math.floor(Math.random() * (14 - 7 + 1) ) + 7;
    		var userAnswer = 0
    		document.getElementById('num1').innerHTML = num1;
    		document.getElementById('num2').innerHTML = num2;
    		
    		
    		
    		function validateAnswer(num1, num2) {
    			var realAnswer = num1*num2;
    			var userAnswer = document.getElementById('userAnswer').value;
    			if (realAnswer == userAnswer){
    				return 'correct';
    			}
    			else {
    				return 'incorrect';			
    			}
    
    		}
    	<h1>Multiplication Practice</h1>
    	<div class="equation">
    		<h2 id="num1" class="num1multiply"></h2>
    		<span class="multiplicationSign">&#215;</span>
    		<h2 id="num2" class="num2multiply"></h2>	
    	</div class="equation">
    	<br>
    	<input type="integer" id="userAnswer">
    	<button onclick="validateAnswer(num1, num2);" id="submit">Submit</button>
    	<br>
    	<h2 id="validateAnswer"></h2>
    	<br>
    	<br>
    	<a class="back" href="main.html">back</a>

标签： javascripthtml

解决方案

由于您是validateAnswer()从 onclick 调用该函数，因此我建议您不要返回任何内容。JavaScript 函数不必有返回值。它只能执行一个动作。在这种情况下，我建议更新函数以将结果设置到文档中。

function validateAnswer(num1, num2) {
    var realAnswer = num1*num2;
    var userAnswer = document.getElementById('userAnswer').value;
    var result;
    if (realAnswer == userAnswer){
        result = 'correct';
    }
    else {
        result = 'incorrect';         
    }
    document.getElementById('validateAnswer').innerHTML = result;
}

推荐阅读