2017-07-24 75 views
-1

您好我正在開發JavaScript計算器僅用於練習目的。這是我的Html代碼。作爲提交按鈕的單選按鈕javascript?

<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

提供最低限度的,W代碼片段。 –

+0

你也可以在單選按鈕上使用'onclick'。那麼最正確的方法是在輸入元素上使用'onchange'。 – yuriy636

+0

這些不是單選按鈕,這些都是提交按鈕,如果是表單的一部分,這些按鈕將起作用。請明確你想要的'cal()'函數還是提交。 – Adder

回答

0

希望你lookiing這樣的事情..

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; 
 
}
#result { 
 
    font-weight: bold; 
 
}
<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>

0

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; 
 
}
#result { 
 
    font-weight: bold; 
 
}
<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>