我正在编码JavaScript和html,但是如何将两个整数相加并将其放入结果文本中

问题描述 投票:-1回答:4

我正在尝试在结果文本框中添加两个整数。我试图添加它们并在“ 5 + 5 = 10”结果框中显示公式公式,例如“((num1 + num2 =值)””。但是我仍然不知道如何将整数相加。

请忽略代码的其余部分,一旦我找出了附加数字,就可以完成其余的工作。

<!DOCTYPE html>
<html>
    <head>
        <title>Math Tutor</title>
          <script src="mht.js"></script>
    </head>
<body>
<h1>Math Tutor</h1>
<lable>Enter a number</lable>
<input type="text" id="n1"><br>
<lable>Enter next number</lable>
    <input type="text" id="n2"><br>

    <input type="button" value="+" id="addNum" onclick="Addition">
  <input type="button" value="-" id="subNum" onclick="subtrack">
  <input type="button" value="/" id="divNum" onclick="divide">
  <input type="button" value="*" id="multiNum" onclick="multiply"><br>

  <input type="text" name="result" id="res" ><br><br>

  <lable>Slope Calculation</lable><br>
</body>
</html>
var $ = function(id){
return document.getElementById(id);
};

var add = function(){
  var num1 = parseInt($("n1").value);
  var num2 = parseInt($("n2").value);
 var sum = num1 + num2;
document.getElementByI("result") = (n1 "+" n2 "=" sum );
};
  window.onload = function() {
    $("Addition").onclick = add;
  };
``




javascript html
4个回答
0
投票

[(n1 "+" n2 "=" sum )是错误的,请使用其中一个

n1 + '+' + n2 + '=' sum

`${n1}+${n2}=${sum}`

而且,在同一行上,您在getElement上输入了错字写了document.getElementByI("result") = ...-即使您刚刚编写了一个函数来为您处理此问题($)

此外,$("Addition").onclick应该为$('addNum').addEventListener('click', add);


0
投票

我不建议使用$,因为它通常用于jQuery。请不要将HTML名称属性用作JS ID。而且我将数字输入字段更改为type="number",所以有人在其中输入文本不会有问题。

function get(id){
return document.getElementById(id);
};

function add() {
  var num1 = parseFloat(get("n1").value);
  var num2 = parseFloat(get("n2").value);
 var sum = num1 + num2;
get("res").value = (num1 + "+" + num2 + "=" + sum );
};
<!DOCTYPE html>
<html>
    <head>
        <title>Math Tutor</title>
          <script src="mht.js"></script>
    </head>
<body>
<h1>Math Tutor</h1>
<lable>Enter a number</lable>
<input type="number" id="n1"><br>
<lable>Enter next number</lable>
    <input type="number" id="n2"><br>

    <input type="button" value="+" id="addNum" onclick="add()">
  <input type="button" value="-" id="subNum" onclick="subtract()">
  <input type="button" value="/" id="divNum" onclick="divide()">
  <input type="button" value="*" id="multiNum" onclick="multiply()"><br>

  <input type="text" name="result" id="res" ><br><br>

  <lable>Slope Calculation</lable><br>
</body>
</html>

0
投票

您的代码中有几个问题:

您已经在sum中获得了计算值,只需将其分配即可。您还必须使用value属性将新值分配给元素。

在使用值进行计算时,应在此处使用输入类型编号而不是文本。

[代码中使用的ID之间也存在不匹配(resresult不相似)。

您还应该使用addEventListener()而不是click

如果要以字符串形式在结果中使用变量名,请更改

document.getElementByI("result") = (n1 "+" n2 "=" sum );

收件人

document.getElementById("result").value = "n1 + n2 = " + sum;

Demo:

var $ = function(id){
  return document.getElementById(id);
};

var add = function(){
  var num1 = parseInt($("n1").value) || 0; // retrun 0 if null
  var num2 = parseInt($("n2").value) || 0; // retrun 0 if null
  var sum = num1 + num2;
  document.getElementById("result").value = "n1 + n2 = " + sum;
};
window.onload = function() {
  $("addNum").addEventListener('click', add);
};
<h1>Math Tutor</h1>
<lable>Enter a number</lable>
<input type="number" id="n1"><br>
<lable>Enter next number</lable>
<input type="number" id="n2"><br>

<input type="button" value="+" id="addNum">
<input type="button" value="-" id="subNum" onclick="subtrack">
<input type="button" value="/" id="divNum" onclick="divide">
<input type="button" value="*" id="multiNum" onclick="multiply"><br>

<input type="text" name="result" id="result" ><br><br>

<lable>Slope Calculation</lable><br>

0
投票

不需要为每个操作使用单独的功能-只需为所有按钮分配一个事件处理程序,并使用其他逻辑(在这种情况下为按钮的值)来确定要执行的操作。使用parseFloat而不是parseInt来处理用户输入可以(不出意外地)使用浮点数而不是整数。使用input元素显示结果不是问题,但看起来确实不寻常-尤其是考虑到有专门针对此类情况的HTML元素-即output元素。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Math Tutor</title>
        <style>
            html, html *{ box-sizing:border-box; }

            body{ margin:0; padding:0; display:flex; flex-direction:column; align-items:center; align-content:center; justify-content:center; width:100%;height:100vh;font-family:calibri,verdana,arial; }
            form{ display:flex; justify-content:center; border:1px solid black; width:80%; height:50%; margin:auto; }

            h1{ writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.5rem; letter-spacing: 0.15rem; margin:auto; background:black; color:white; height:100%; padding:0.5rem; text-align:center; }
            label{ display:flex; flex:1; align-items:center; flex-direction:row; width:100%; padding:0.5rem; margin:auto; }
            label:before{content:attr(data-label);text-transform:capitalize}

            input{ padding:0.5rem;margin:auto }

            div{ display:flex; flex-direction:row; flex:1; padding:1rem; margin:auto; }
            div > input{ flex:1;margin:0 0.25rem }

            output{ width:60%; height:3rem; margin:auto; text-align:center; font-size:2rem; }
        </style>
        <script>

            /* utility to emulate PHP's `sprintf` function for formatting a string */
            String.prototype.sprintf = function() {
                return [ ...arguments ].reduce( ( p,c ) => p.replace(/%s/,c), this );
            };

            document.addEventListener('DOMContentLoaded',()=>{

                /* get references to the form elements */
                let form=document.forms.mathtutor;
                let number_1=form.querySelector('input[type="number"][name="number-1"]');
                let number_2=form.querySelector('input[type="number"][name="number-2"]');
                let output=document.querySelector('output');

                /* obtain reference to the function buttons and assign event handler */
                Array.prototype.slice.call( form.querySelectorAll('div > [type="button"]') ).forEach( bttn=>{
                    bttn.addEventListener('click',function(e){
                        let product;

                        /* ensure that the values from the input elements are numbers */
                        let i1=parseFloat( number_1.value );
                        let i2=parseFloat( number_2.value );

                        /* perform whatever calculation is required according to button pressed */
                        switch( this.value ){
                            case '+':   product=i1 + i2; break;
                            case '-':   product=i1 - i2; break;
                            case '/':   product=i1 / i2; break;
                            case 'x':   product=i1 * i2; break;
                        }

                        /* format the output and display the result */
                        output.innerText='%s %s %s = %s'.sprintf( i1, this.value, i2, product );
                    });
                })
            });
        </script>
    </head>
    <body>
        <form name='mathtutor' method='post'>
            <h1>Mathematics tutor</h1>
            <label for='number-1' data-label='number 1'><input type='number' name='number-1' required /></label>
            <label for='number-2' data-label='number 2'><input type='number' name='number-2' required /></label>
            <div>
                <input type='button' value='+' />
                <input type='button' value='-' />
                <input type='button' value='/' />
                <input type='button' value='x' />
            </div>
        </form>
        <output></output>
    </body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.