Does anyone know how I can fix this simple calculator? [closed]

Question

Does anyone know how I can fix this simple calculator? [closed]

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css.css" rel="stylesheet" type="text/css">
    </head>
    <body>

        <div id="page">
            <header>
                <h1>Calculadora</h1>
            </header>   
            <main>
                <div id="contenedorFormulario">
                    <form name="calc">
                        Operador 1:<br>
                        <input type="Text" name="operador1"  ><br>
                        Operador 2:<br>
                        <input type="Text" name="operador2"  ><br>
                        **Campos obligatorios.<br>
                        Operaciones  <input type="Button" name="" value="+" onclick="calcula('+')" ><input type="Button" name="" value="-" onclick="calcula('-')"><input type="Button" name="" value="x" onclick="calcula('*')"><input type="Button" name="" value="/"  onclick="calcula('/')"> <br>
                        Resultado:<br>
                        <input type="Text" name="resultado" value="0" ><br>    

                    </form> 
                    <script language="JavaScript">
                        document.title = "Calculadora";    

                        function calcula(operacion) {
                            var operando1 = document.calc.operando1.value;
                            var operando2 = document.calc.operando2.value;
                            var result = eval(operando1 + operacion + operando2)
                            alert(result);
                            document.calc.resultado.value = result;
                        }    

                        document.calc.resultado.addEventListener(onclick, calcula());
                        //alert();    

                    </script>

                </div>
            </main>
        </div>

    </body>
</html>

javascript

asked by javi boix 31.05.2018 в 17:08

source

2 answers

0

I would recommend you to manage the fields by id's and not by names, also to give default values to the fields.

function calcula(operacion) {
  var operando1 = document.getElementById("operador1").value
  var operando2 = document.getElementById("operador2").value
  var result = eval(operando1 + operacion + operando2)
  document.calc.resultado.value = result
}

<html>

<head>
  <title>Calculadora</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div id="page">
    <header>
      <h1>Calculadora</h1>
    </header>
    <main>
      <div id="contenedorFormulario">
        <form name="calc">
          Operador 1:<br>
          <input type="Text" id="operador1" name="operador1" value=0><br> Operador 2:<br>
          <input type="Text" id="operador2" name="operador2" value=0><br> **Campos obligatorios.<br> Operaciones <input type="Button" name="" value="+" onclick="calcula('+')"><input type="Button" name="" value="-" onclick="calcula('-')"><input type="Button" name="" value="x"
            onclick="calcula('*')"><input type="Button" name="" value="/" onclick="calcula('/')"> <br> Resultado:
          <br>
          <input type="Text" name="resultado" value="0"><br>

        </form>
      </div>
    </main>
  </div>

</body>

</html>

answered by 31.05.2018 в 17:42

Error when deploying spring boot How to delete from table when chekcbox select is removed

score 0 · Accepted Answer

It would be easier for you to use id's instead of name's. You do not need any EventListener because the buttons call the onClick function.

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css.css" rel="stylesheet" type="text/css">
    </head>
    <body>

        <div id="page">
            <header>
                <h1>Calculadora</h1>
            </header>   
            <main>
                <div id="contenedorFormulario">
                    <form name="calc">
                        Operador 1:<br>
                        <input type="Text" id="operador1"  ><br>
                        Operador 2:<br>
                        <input type="Text" id="operador2"  ><br>
                        **Campos obligatorios.<br>
                        Operaciones  <input type="Button" name="" value="+" onclick="calcula('+')" ><input type="Button" name="" value="-" onclick="calcula('-')"><input type="Button" name="" value="x" onclick="calcula('*')"><input type="Button" name="" value="/"  onclick="calcula('/')"> <br>
                        Resultado:<br>
                        <input type="Text" id="resultado" value="0" ><br>    

                    </form> 
                    <script language="JavaScript">
                        document.title = "Calculadora";    

                        function calcula(operacion) {
                            var operando1 = document.getElementById("operador1").value;
                            var operando2 = document.getElementById("operador2").value;
                            var result = eval(operando1 + operacion + operando2)
                            alert(result);
                            document.getElementById("resultado").value = result;
                        }    
                        
                        //alert();    

                    </script>

                </div>
            </main>
        </div>

    </body>
</html>