如何使html表单启动一个函数

时间:2014-03-06 02:24:56

标签: javascript forms textinput

我想知道是否有一种简单的方法可以创建一个带有文本输入的表单按钮,启动一个表单,检查答案是否正确,然后继续告诉你。这就是我所拥有的,你能告诉我我需要什么吗?

<!doctype html>
<body>
 <center>
  <form name="Input" action="Answer" method="get">
   <input type="text" name="Input">
   <input type="submit" value="submit">
  </form>
  <script type="text/javascript">
   var A = Math.floor(Math.random()*11);
   var B = Math.floor(Math.random()*11);
   var C = A+B;
   var Input = document.getElementById('Input');
   document.write(A + "+" + B)
   function Answer()
   {
     alert("correct!!");
   }
 </script>

</body>
</html>

2 个答案:

答案 0 :(得分:0)

我知道你没有使用jQuery,但是你在寻找这个nature的东西吗?

它可以很容易地更改为普通的JavaScript。我只是想使用bootstrap来获得警报的简单视觉效果。

html将是这些行(使用jQuery和bootstrap):

<div class="alert alert-danger" id="correct">Your answer is currently 
    <span id="type"> INCORRECT </span>
</div>
<form>
    <input name="answer" id="answer">
</form>
<p>Hint: the answer is "correct"</p>

并且脚本可以这样工作:

$("#answer").keyup(function(){
if($(this).val() === "correct"){
    $("#correct").removeClass("alert-danger")
    .addClass("alert-success");
    $("#type").text("CORRECT!")
}
else{
    $("#correct").removeClass("alert-success")
    .addClass("alert-danger");
    $("#type").text("INCORRECT!")
}
}).keyup();

这只是检查答案的输入的基本实现。在这种情况下,键入“正确”会使警报变为绿色。

答案 1 :(得分:0)

function calculateAnswer()
{
var A = Math.floor(Math.random()*11);
var B = Math.floor(Math.random()*11);
var C = A+B;
var Input = document.getElementById('Input');
if(Input.value == C)
{
document.body.innerHTML += (A + "+" + B);
//  Or another thing to do if the answer's correct
}
}

此外,将事件侦听器附加到提交按钮以使其运行函数:

referenceToTheSubmitButton.addEventListener("click", calculateAnswer);

根据需要缩进。 请享用! :d