Estoy codificando JavaScript y HTML, pero cómo agregar dos enteros y ponerlos en el texto del resultado -- javascript campo con html camp Relacionados El problema

I'm coding JavaScript and html, but how to add two integers and put them in the result text


-1
vote

problema

Español

Estoy tratando de agregar dos enteros, en el cuadro de texto de resultados. Estoy tratando de agregarlos y mostrar la fórmula de fórmula "(NUM1 + NUM2 = valor)" en el cuadro de resultados "5 + 5 = 10". Sin embargo, todavía no puedo averiguar cómo agregar los enteros.

Por favor, ignore el resto del código, una vez que obtenga la figura de su adición, espero que pueda hacer el resto.

  'BWL0520BG6,1'2  
  'BWL0520BG6,1'3  
Original en ingles

I'm trying to add two integers, in the result text box. I'm trying to add them and display the formula formula like "(num1 + num2 = value)" In the result box "5 + 5 = 10". Yet I still can not figure out how to add the integers.

Please ignore the rest the of the code, once I get the addition figure out hopefully I will be able to do the rest.

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

Lista de respuestas

0
 
vote

No recomendaría usar el $ , ya que comúnmente se usa para jquery. Por favor, no use el atributo de nombre HTML como ID de JS. Y cambié los campos de entrada del número a type="number" , por lo que no habrá problemas con alguien que escriba un mensaje de texto.

  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>   
 

I wouldnt recommend using the $ as it's commonly used for jQuery. Please don't use the HTML name attribute as JS id. And I changed the number input fields to type="number" so there won't be problems with someone writing text in it.

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
 
vote

No hay necesidad de funciones individuales para cada operación: simplemente asigne un único controlador de eventos a todos los botones y use otra lógica (en este caso, el valor del botón) para determinar qué operaciones realizar. Uso de parseFloat En lugar de parseInt para procesar la entrada del usuario permite los flotadores (increíbles) en lugar de enteros. Si bien no es un problema utilizando un elemento input2 para mostrar el resultado, parece inusual, especialmente dado que existe un elemento HTML específicamente para situaciones como esta, a saber, el output elemento.

  <!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>   
 

There is no need for individual functions for each operation - simply assign a single event handler to all of the buttons and use other logic ( in this case the value of the button ) to determine what operations to perform. Using parseFloat rather than parseInt to process the user input allows for ( unsurprisingly ) floats rather than integers. Whilst it is not a problem using an input element to display the result it does seem unusual - especially given that there is an HTML element specifically for situations like this - namely the output element.

<!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> 
 
 
 
 

Relacionados problema

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

635  Determinar la zona horaria de un usuario  ( Determine a users timezone ) 
¿Hay una forma estándar para que un servidor web pueda determinar la zona horaria de un usuario dentro de una página web? Tal vez de un encabezado HTTP o pa...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

273  Múltiples botones de envío en un formulario HTML  ( Multiple submit buttons in an html form ) 
Digamos que crea un asistente en un formulario HTML. Un botón se remonta, y uno avanza. Dado que el botón Atrás aparece primero en el marcado cuando presion...

80  ¿Cómo imprimo un documento HTML de un servicio web?  ( How do i print an html document from a web service ) 
Quiero imprimir HTML desde un servicio web C #. El control del navegador web está exagerado, y no funciona bien en un entorno de servicio, ni funciona bien en...

31  ¿Cómo doy a mis sitios web un icono para iPhone?  ( How do i give my websites an icon for iphone ) 
¿Cómo configuro el icono que aparece adecuado en el iPhone para los sitios web que he creado? ...

4  ¿Cuál es el futuro de la web? Xhtml 2, html 5, o otra cosa?  ( Whats the future of the web xhtml 2 html 5 or something else ) 
Estoy confundido por la discusión y el avance de una nueva versión de HTML y una nueva versión de XHTML. ¿Son competidores? Si es así, ¿qué es lo más probable...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos