单选按钮作为提交按钮javascript？答案

【问题标题】：radio buttons as submit buttons javascript?单选按钮作为提交按钮javascript？
【发布时间】：2017-12-29 19:35:49
【问题描述】：

您好，我正在用 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。

提前感谢您的专家建议。

问候迪拉杰

【问题讨论】：

提供最小的工作代码 sn-p。
您也可以在单选按钮上使用onclick。那么最正确的方法是在输入元素上使用onchange。
这些不是单选按钮，这些是提交按钮，如果是表单的一部分，它将起作用。关于cal() 函数与提交，请明确说明您想要什么。
"我想将它们转换为具有相同名称属性的单选按钮，但我不知道如何使单选按钮也充当提交按钮。" - 别。将它们保留为提交按钮。让它们成为单选按钮根本没有帮助（但会产生很多问题）。
这是计算器的完整代码吗？

标签： javascript button submit calculator radio

【解决方案1】：

希望你正在寻找这样的东西..

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>

【讨论】：

【解决方案2】：

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>

【讨论】：