calculating from an input-CodePudding

I'm starting studying the DOM in javascript and I'd like to create a program which makes the sum of two numbers given on input and show it.

I'd like to know what functions should I use, and what functions it is better I didn't.

This is my (very simple) html code:

let warp = document.getElementById('warp');
let first = document.getElementById('first').value;
let one = parseInt(first);
let second = document.getElementById('second').value;
let two = parseInt(second);

let res = document.getElementById('res');

//res.addEventListener('click', calcul);
//res.onclick(calcul);

let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);

function calcul(first, second) {
  console.log(one   two);
  event.preventDefault();
}

<!DOCTYPE html>
</head>

<body>
  <div id="warp">
    <form>
      <input id="first" type="number">first number</input>
      <input id="second" type="number">second number</input>
      <input id="res" type="submit" value="Envoyer" onclick="calcul()" />
    </form>
    <div>
</body>

CodePudding user response：

let answerElemenet = document.createElement("h1");
// You can create a h1 element to display your answer after calculating it
document.body.appendChild(answerElemenet);

// Inside the calculate Function you get the values of input one and two
// and then you store the sum value in a variable and just change your 
// answerElement to have the innerHTML value of the finalSum Variable
function calculate(){
    let valueOne = parseFloat(document.getElementById('first').value);
    let valueTwo = parseFloat(document.getElementById('second').value);

    let finalSum = valueOne   valueTwo;

    answerElemenet.innerHTML = finalSum;
}

CodePudding user response：

This will work. You just need to call the values based on their id in the calcul() function itself.

let warp = document.getElementById('warp');
let res = document.getElementById('res');
let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);

function calcul() {
  let first = document.getElementById('first').value;
  let one = parseInt(first);
  let second = document.getElementById('second').value;
  let two = parseInt(second);
  if(isNaN(one) || isNaN(two)){
    event.preventDefault();
    return
  }
  console.log(one   two);
  event.preventDefault();
}

<!DOCTYPE html>
</head>

<body>
  <div id="warp">
    <form>
      <input id="first" type="number">first number</input>
      <input id="second" type="number">second number</input>
      <input id="res" type="submit" value="Envoyer" onclick="calcul()" />
    </form>
    <div>
</body>

CodePudding user response：

Welcome to Stackoverflow!

I copied your answer and made some small changes. Here comes a brief description and explanation of what you could do better:

If you don't plan to change these references use const instead of let. Also try to keep input elements separated from their values. The reference to the input probably won't change but their value most certainly will.

const warp = document.getElementById('warp');
const first = document.getElementById('first');
const second = document.getElementById('second');
const res = document.getElementById('res');

When calculating input values, you usually want them as fresh as possible so instead of saving input values right at the beginning of the script, you get them when you need them, in the calcul() function.

You will also need some kind of validation. Here we try to convert the input to a number and set to zero if not possible:

function calcul() {
  event.preventDefault();
  const one = parseFloat(first.value) || 0;
  const two = parseFloat(second.value) || 0;
  console.log(one   two);
}

The preferred way of adding event handlers to DOM elements is using the event API. So to call the calcul()function you use the line you had commented:

res.addEventListener('click', calcul);

This also means you should remove the onClick attribute from the DOM. Also, input cannot have children:

<input id="first" type="number" />
<input id="second" type="number" />
<input id="res" type="submit" value="Envoyer"/>

All together looks like this:

const warp = document.getElementById('warp');
const first = document.getElementById('first');
const second = document.getElementById('second');
const res = document.getElementById('res');

function calcul() {
  event.preventDefault();
  const one = parseFloat(first.value) || 0;
  const two = parseFloat(second.value) || 0;
  console.log(one   two);
}

res.addEventListener('click', calcul);


let nouveau = document.createElement('div');
nouveau.id = 'nouveau';
nouveau.textContent = "nouveau";
warp.appendChild(nouveau);

<!DOCTYPE html>
</head>

<body>
  <div id="warp">
    <form>
      <input id="first" type="number" />
      <input id="second" type="number" />
      <input id="res" type="submit" value="Envoyer"/>
    </form>
    <div>
</body>

Keep up the good job and never stop asking questions!