0

The program I am trying to write is a little more complicated but here is a simple addition and subtraction evaluation code to help understand what I am trying to do.

let x0 = document.getElementsByClassName('x0').value;
let y0 = document.getElementsByClassName('y0').value;

function addTion(num1, num2) {
  return (num1 + num2);
}

function subTion(num1, num2) {
  return (num1 - num2);
}

function Evaluate() {
  if (x0 > y0) {
    console.log(addTion(x0, y0));
    console.log(x0);
  } else if (x0 < y0) {
    console.log(subTion(x0, y0));
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name='viewpoint' content="width=device-width,
    initial-scale=1.0">
  <title> Interp-Xtrap</title>
</head>

<body>
  <div>
    <form name="getData">
      <label for="x0">X0:</label>
      <input type="text" id="point" name="x0" size="10px">
      <label for="y0">Y0:</label>
      <input type="text" id="point" name="y0" size="10px">
      <button type="button" id="button" onclick=Evaluate()>Evaluate</button>
    </form>

  </div>
</body>

When I input 1 and 2 for X0 and Y0 respectively, I expect to see -1 as result. #What is the problem with my code?

Pozeidon
  • 107
  • 1
  • 14
  • What do you see instead of the expected result? – Hidayat Rzayev Mar 19 '21 at 11:51
  • 2
    `document.getElementsByClassName('x0')` has no `value` property. Also you have duplicate ids `point`. `id` must be unique at all times. Lastly, none of your elements uses the class names you want to select by. Maybe you were looking for `document.getElementsByName('x0')[0]`? One more thing, the `for` attribute on `label` needs to reference the `id` of an input element, not the `name`. – connexo Mar 19 '21 at 11:55
  • Nothing at all, the result console is empty – Pozeidon Mar 19 '21 at 11:55
  • @HidayatRzayev Nothing shows on the result at all, I tried displaying even the values of x0 and y0 but it appears after I click on Evaluate, those values are not even fetched by the script – Pozeidon Mar 19 '21 at 12:00
  • @connexo Interesting! In my original code, I use the IDs for styling and didn't want to have duplicate chunks of codes for each of my form fields. I have changed from getElementsByClassName to getElementsByName but still no result. – Pozeidon Mar 19 '21 at 12:07
  • @Pozeidon check the answer below – Hidayat Rzayev Mar 19 '21 at 12:09

1 Answers1

2

I would initiate the values with null values. As soon as you click the evaluate button, the values are retrieved via the getElementById method. With the if and else condition your methods are called.

let x0 = null
let y0 = null

function addTion(num1, num2) {
  return (num1 + num2);
}

function subTion(num1, num2) {
  return (num1 - num2);
}

function evaluateVal() {
  x0 = document.getElementById('x0').value;
  y0 = document.getElementById('y0').value;

  if (x0 > y0) {
    console.log(addTion(x0, y0));
    console.log(x0);
  } else {
    console.log(subTion(x0, y0));
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name='viewpoint' content="width=device-width,
    initial-scale=1.0">
  <title> Interp-Xtrap</title>
</head>

<body>
  <div>
    <form name="getData">
      <label for="x0">X0:</label>
      <input type="text" id="x0" name="x0" size="10px">
      <label for="y0">Y0:</label>
      <input type="text" id="y0" name="y0" size="10px">
      <button type="button" id="button" onclick="evaluateVal()">Evaluate</button>
    </form>

  </div>
</body>
wittgenstein
  • 3,670
  • 7
  • 24
  • 41
  • Thanks very much for the help. I just implemented your solution in my main program and it works perfectly. I have also tried to create classes to handle the style for the input fields but It doesn't work, what could be the problem? – Pozeidon Mar 19 '21 at 12:29
  • I'm glad to hear that. Do you use `#point` in your .css-file? then you know where the error is and have to add a class to the input or use the custom id `#x0` & `#y0`. – wittgenstein Mar 19 '21 at 12:51
  • 1
    Remember `x0`and `y0` in your code are `strings`. – connexo Mar 19 '21 at 14:06