单选按钮作为提交按钮javascript?

时间:2017-07-24 09:23:32

标签: javascript button submit calculator radio

您好我正在开发javascript中的计算器仅用于锻炼目的。这是我的Html代码。

<h1 id="h1">Calculator</h1>
<input type="text" id="vaLue" name="val1">
<input type="submit" value="+" onclick="cal()" id="plus">
<input type="submit" value="-" onclick="cal()" id="minus">
<input type="submit" value="*" onclick="cal()" id="mul">
<input type="submit" value="/" onclick="cal()" id="devide">
<input type="submit" value="=" onclick="cal()" id="equal">

javascript代码

    function cal(){

    var val1 = document.getElementById('vaLue').value;
    var errormessage = 'enter value';
    var plu= document.getElementById('plus').value;
    var minu= document.getElementById('minus').value;
    var mult= document.getElementById('mul').value;
    var div= document.getElementById('devide').value;
    var equ= document.getElementById('equal').value;

    if( val1.length == 0) {

            var error = document.getElementById('error');
            error.innerHTML= errormessage;
            return; 


    }

    if (val1.length != 0){
        var bt=document.getElementById('h1');
            calc= val1+plu;
    bt.innerHTML=calc;
    val1=null;
    }


}

我想使用这些操作按钮作为提交按钮,根据其功能随机使用。我想将它们转换为具有相同名称属性的单选按钮,但我也不知道如何使单选按钮充当提交按钮。

如果你能告诉我如何定义变量值null。

提前感谢您的专家建议。

此致 Dheeraj

2 个答案:

答案 0 :(得分:0)

希望你看起来像这样......

&#13;
&#13;
var sum = 0;

var inputVal = document.getElementById('vaLue');

function div() {

  var inputNum = parseFloat(inputVal.value) || 0;
  showResult(sum / inputNum);
}

function mul() {

  var inputNum = parseFloat(inputVal.value) || 0;
  showResult(sum * inputNum);
}

function sub() {

  var inputNum = parseFloat(inputVal.value) || 0;
  showResult(sum - inputNum);
}

function add() {

  var inputNum = parseFloat(inputVal.value) || 0;
  showResult(sum + inputNum);
}

function showResult(value) {
  sum = value
  document.getElementById('result').innerHTML = value;
}
&#13;
#result {
  font-weight: bold;
}
&#13;
<h1 id="h1">Calculator</h1>
<input type="text" id="vaLue" name="val1">
<input type="submit" value="+" onclick="add()" id="plus">
<input type="submit" value="-" onclick="sub()" id="minus">
<input type="submit" value="*" onclick="mul()" id="mul">
<input type="submit" value="/" onclick="div()" id="devide">
<div id="result">0</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

&#13;
&#13;
var sum = 0;

var inputVal = document.getElementById('vaLue');

function div() {

  var inputNum = parseFloat(inputVal.value) || 0;
  showResult(sum / inputNum);
}

function mul() {

  var inputNum = parseFloat(inputVal.value) || 0;
  showResult(sum * inputNum);
}

function sub() {

  var inputNum = parseFloat(inputVal.value) || 0;
  showResult(sum - inputNum);
}

function add() {

  var inputNum = parseFloat(inputVal.value) || 0;
  showResult(sum + inputNum);
}

function showResult(value) {
  sum = value
  document.getElementById('result').innerHTML = value;
}
&#13;
#result {
  font-weight: bold;
}
&#13;
<h1 id="h1">Calculator</h1>
<input type="text" id="vaLue" name="val1">
<input type="submit" value="+" onclick="add()" id="plus">
<input type="submit" value="-" onclick="sub()" id="minus">
<input type="submit" value="*" onclick="mul()" id="mul">
<input type="submit" value="/" onclick="div()" id="devide">
<div id="result">0</div>
&#13;
&#13;
&#13;