Question

我正在构建一个简单的应用程序，将用户输入的数字乘以5并显示结果。因为，我是初学者，我需要一些帮助。

这是我的HTML代码：

        <!DOCTYPE html>
    <head>
    <title>Area Calc</title>
       <link rel='stylesheet' type='text/css' href='style.css'/>
       <link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
       <link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
             <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script type='text/javascript' src='script.js'></script>

            <head>
            <body>
            <div class="heading">Number Of Persons Calc</div>
         <div style=" color: white; text-align:auto; width:400px; margin-right:auto; margin-left:auto; border:1px solid white; margin-top: 120px;">
        <form method="" action="">
                <input type="text" name="area" placeholder="Enter in square metres!" class="input" />
                <input class="submit" type="submit" value="Submit" class="button" />

            </form>
            </div>
<body>
<html>

有人能告诉我哪些JavaScript / jQuery代码可以从文本输入元素中获取用户输入的值并将其乘以5然后将结果显示给用户？请帮帮我。

Answer 1

HTML

 <input type="text" name="area" placeholder="Enter in square metres!" id="op" class="input" />
 <input class="submit" type="button" value="Submit" class="button" onClick="mulBy()" />

SCRIPT

function mulBy(){
var op1=parseFloat(document.getElemntById("op").value);
val ans=op1*5;
alert(ans); 
}

Answer 2

假设你想在id为＃34;结果＆＃34;：

的div中显示答案

  <input type="text" name="area" placeholder="Enter in square metres!" class="input" />
  <input class="submit button" type="submit" value="Submit"  />

 <div id="result"></div>

此div位于提交按钮之后。现在在行后面写下面的代码：

 <script type='text/javascript' src='script.js'></script>


  $(document).ready(function(){

  $(".submit ").click(function(){
   $("#result").html(parseInt($(".input").val())*5);
   return false;
  });
 });

Answer 3

使用HTML计算而不使用表单和提交按钮

<强> HTML

<input type="text" id="area" name="area" placeholder="Enter in square metres!"
                                                             class="input"/>
<br/>
<div id="result"></div>

<强> JqueryCode

$(document).ready(function(){
  $("input#area").change(function(){
      var input_box = $('#area').val();
      if ( input_box != ''){
        $("div#result").html(input_box*5);
      }
      else{
        $("div#result").html("");
      }
  });      
});

LiveDemo JsFiddle

如何使用JavaScript在HTML表单中进行计算？

3 个答案: