时间戳

首页 > 解决方案 > 我正在编写 JavaScript 和 html 代码，但是如何添加两个整数并将它们放入结果文本中

javascript - 我正在编写 JavaScript 和 html 代码，但是如何添加两个整数并将它们放入结果文本中

问题描述

我正在尝试在结果文本框中添加两个整数。我正在尝试添加它们并在结果框中显示“（num1 + num2 = value）”之类的公式公式“5 + 5 = 10”。但是我仍然不知道如何添加整数。

请忽略其余的代码，一旦我得到加法数字，希望我能完成剩下的工作。

<!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;
  };
``

标签： javascripthtml

解决方案

每个操作不需要单独的函数 - 只需将单个事件处理程序分配给所有按钮并使用其他逻辑（在本例中为按钮的值）来确定要执行的操作。使用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>

推荐阅读