I need help figuring out how to fix the output when compute complex numbers

Question

JavaScript Code:

function ImaginaryNumbers(realNum, imaginary) {
    this.realNum = 0;
    this.imaginary = 0;
    this.realNum = (typeof realNum === 'undefined') ? this.realNum : parseFloat(realNum);
    this.imaginary = (typeof imaginary === 'undefined') ? this.imaginary : parseFloat(imaginary);  
}

ImaginaryNumbers.transform = function(num) {
    var imaginaryNumbers;
    imaginaryNumbers = (num instanceof ImaginaryNumbers) ? num : imaginaryNumbers;
    imaginaryNumbers = (typeof num === 'number') ? new ImaginaryNumbers(num, 0) : num;
    return imaginaryNumbers;
};

function display_complex(re, im) {
    if(im === '0') return '' + re;
    if(re === 0) return '' + im + 'i';
    if(im < 0) return '' + re + im + 'i';
    return '' + re + '+' + im + 'i';
}

function addingComplexNumbers(first, second) {
    var num1;
    var num2;
    var first = parseInt(document.getElementById("firstComplexNumber").value) + parseInt(document.getElementById("secondComplexNumber").value);
    var second = parseInt(document.getElementById("thirdComplexNumber").value) + parseInt(document.getElementById("fourthComplexNumber").value);
    num1 = ImaginaryNumbers.transform(first);
    num2 = ImaginaryNumbers.transform(second);    
    var realNum = num1.realNum + num2.realNum;
    var imaginary = num1.imaginary + num2.imaginary;
    return document.getElementById("result8").innerHTML = display_complex(realNum, imaginary);

/*********************************************************/

HTML Code:
<form>
    <h1>Computing Imaginary Numbers</h1>
    <fieldset>    
        <p>Input the first real number : <input type="text" id="firstComplexNumber" /></p>
        <p>Input the first imaginary complex number: <input type="text" id="secondComplexNumber" /></p>
    </fieldset>
    <br>
    <fieldset>    
        <p>Input the second real number: <input type="text" id="thirdComplexNumber" /></p>
        <p>Input the second imaginary complex number : <input type="text" id="fourthComplexNumber" /></p>
    </fieldset>
    <input type="button" onclick="addingComplexNumbers()" value="Add">
    <input type="button" onclick="subtractingComplexNumbers()" value="Subtract">
    <input type="button" onclick="multiplyingComplexNumbers()" value="Multiply">
    <input type="button" onclick="dividingComplexNumbers()" value="Divide">

    <p>Result: <br>
        <span id="result8"></span>
    </p>
</form>

I used (2, -7) and (4,3) for the numbers but the program spits out 2+0i. Which isn't the answer. The correct answer is 6-4i. I'm not sure where I should be looking for to fix the computation. Any help would be nice!

Answer 1

You were initialising the imaginary numbers incorrectly, see changes the addingComplexNumbers function.

There are a few ways to fix this but I just went with passing the pairs into the ImaginaryNumbers constructor

function ImaginaryNumbers(realNum, imaginary) {
  this.realNum = 0;
  this.imaginary = 0;
  this.realNum = (typeof realNum === 'undefined') ? this.realNum : parseFloat(realNum);
  this.imaginary = (typeof imaginary === 'undefined') ? this.imaginary : parseFloat(imaginary);
}

ImaginaryNumbers.transform = function(num) {
  var imaginaryNumbers;
  imaginaryNumbers = (num instanceof ImaginaryNumbers) ? num : imaginaryNumbers;
  imaginaryNumbers = (typeof num === 'number') ? new ImaginaryNumbers(num, 0) : num;
  return imaginaryNumbers;
};

function display_complex(re, im) {
  if (im === '0') return '' + re;
  if (re === 0) return '' + im + 'i';
  if (im < 0) return '' + re + im + 'i';
  return '' + re + '+' + im + 'i';
}

function addingComplexNumbers() {
  var first = new ImaginaryNumbers(parseInt(document.getElementById("firstComplexNumber").value) || 0, parseInt(document.getElementById("secondComplexNumber").value) || 0);
  var second = new ImaginaryNumbers(parseInt(document.getElementById("thirdComplexNumber").value) || 0, parseInt(document.getElementById("fourthComplexNumber").value) || 0);
  var realNum = first.realNum + second.realNum;
  var imaginary = first.imaginary + second.imaginary;
  var result = display_complex(realNum, imaginary);
  document.getElementById("result8").innerHTML = result;
  return result;
}

<form>
  <h1>Computing Imaginary Numbers</h1>
  <fieldset>
    <p>Input the first real number : <input type="text" id="firstComplexNumber" /></p>
    <p>Input the first imaginary complex number: <input type="text" id="secondComplexNumber" /></p>
  </fieldset>
  <br>
  <fieldset>
    <p>Input the second real number: <input type="text" id="thirdComplexNumber"/></p>
    <p>Input the second imaginary complex number : <input type="text" id="fourthComplexNumber" /></p>
  </fieldset>
  <input type="button" onclick="addingComplexNumbers()" value="Add">
  <input type="button" onclick="subtractingComplexNumbers()" value="Subtract">
  <input type="button" onclick="multiplyingComplexNumbers()" value="Multiply">
  <input type="button" onclick="dividingComplexNumbers()" value="Divide">

  <p>Result: <br>
    <span id="result8"></span>
  </p>
</form>