JavaScript, calculate a populated cell from dropdown

Question

By choosing the version of the product, a price populates the cell of "unit" ... working good so far. But when I choose the quantity "Qt", I wanted the field "Price" to be populated by multiplying (unit*Price). enter image description here

function showVersions() {
  var selectBox = document.getElementById('gcard');
  var userInput = selectBox.options[selectBox.selectedIndex].value;
  if (userInput == 'nvidia') {
    document.getElementById("nvidiaversion").style = "visibility: visible;";
  } else if (userInput == 'amd') {
    document.getElementById("amdversion").style = "visibility: visible;";
  }
  return false;
}

function itemPrice1() {
  var nvidiaItem = document.getElementById('nvidiaversion');
  var nvidiaInput = nvidiaItem.options[nvidiaItem.selectedIndex].value;
  if (nvidiaInput == 'gtx300') {
    var gtx300 = document.getElementById("unit");
    gtx300.innerHTML = 300;
  } else if (nvidiaInput == 'fgt4000') {
    var fgt4000 = document.getElementById("unit");
    fgt4000.innerHTML = 1000;
  }
  return false;
}

function itemPrice2() {
  var amdItem = document.getElementById('amdversion');
  var amdInput = amdItem.options[amdItem.selectedIndex].value;
  if (amdInput == 'amd20') {
    var amd20 = document.getElementById("unit");
    amd20.innerHTML = 369;
  } else if (amdInput == 'krt30') {
    var krt30 = document.getElementById("unit");
    krt30.innerHTML = 200;
  }
  return false;
}

function quantity() {
  var quantity = document.getElementById('quantity');
  var qtInput = quantity.options[quantity.selectedIndex].value;
  var unit = document.getElementById("unit").value;
  if (qtInput == "1") {
    var qt1 = document.getElementById("price");
    qt1.innerHTML = 1 * unit;
  } else if (qtInput == "2") {
    var qt2 = document.getElementById("price");
    qt2.innerHTML = 2 * unit;
  }
  return false;
}

<table>
  <tr>
    <th> Items </th>
    <th> Unit </th>
    <th> Qt </th>
    <th> Price </th>
  </tr>
  <tr>
    <td name="items">
      <div>
        <select name="gcard" id="gcard" onchange="return showVersions();">
          <option value="nvidia">NVIDIA</option>
          <option value="amd">AMD</option>
        </select>
      </div>
      <div>
        <select name="gcard" id="nvidiaversion" style="visibility: hidden;" onchange="itemPrice1();">
          <option value="gtx300">GTX 300</option>
          <option value="fgt4000">FGT 4000</option>
        </select>
      </div>
      <div>
        <select name="gcard" id="amdversion" style="visibility: hidden;" onchange="itemPrice2();">
          <option value="amd20">AMD 20</option>
          <option value="krt30">KRT 30</option>
        </select>
      </div>
    </td>
    <td id="unit">
    </td>
    <td name="quantity">
      <div>
        <select name="quantity" id="quantity" onchange="quantity();">
          <option value="0">Quantity</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
    </td>
    <td id="price">
    </td>
  </tr>
</table>

I believe something is missing im the"function quantity", but i can't get it. NB : I need to make it work without using arrays.

Answer 1

td does not have value, try textContent.

Change:

var unit = document.getElementById("unit").value;

To:

var unit = document.getElementById("unit").textContent;

function showVersions(){
  var selectBox = document.getElementById('gcard');
  var userInput = selectBox.options[selectBox.selectedIndex].value;
  if (userInput == 'nvidia') {
    document.getElementById("nvidiaversion").style="visibility: visible;";
  } else if (userInput == 'amd') {
    document.getElementById("amdversion").style="visibility: visible;";
  }
  return false;
}
function itemPrice1(){
  var nvidiaItem = document.getElementById('nvidiaversion');
  var nvidiaInput = nvidiaItem.options[nvidiaItem.selectedIndex].value;
  if (nvidiaInput == 'gtx300'){
      var gtx300 = document.getElementById("unit");
      gtx300.innerHTML = 300;
  }else if (nvidiaInput == 'fgt4000'){
      var fgt4000 = document.getElementById("unit");
      fgt4000.innerHTML = 1000;
  }
    return false;
}
function itemPrice2(){
  var amdItem = document.getElementById('amdversion');
  var amdInput = amdItem.options[amdItem.selectedIndex].value;
  if (amdInput == 'amd20'){
      var amd20 = document.getElementById("unit");
      amd20.innerHTML = 369;
  }else if (amdInput == 'krt30'){
      var krt30 = document.getElementById("unit");
      krt30.innerHTML = 200;
  }
    return false;
 }
 function quantity(){
  var quantity = document.getElementById('quantity');
  var qtInput = quantity.options[quantity.selectedIndex].value;
  var unit = document.getElementById("unit").textContent;
  if (qtInput == "1"){
      var qt1 = document.getElementById("price");
      qt1.innerHTML = 1*unit;
  }else if (qtInput == "2"){
      var qt2 = document.getElementById("price");
      qt2.innerHTML = 2*unit;
  }
    return false;
}

<table>
  <tr>
    <th> Items </th>
    <th> Unit </th>
    <th> Qt </th>
    <th> Price </th>
  </tr>
  <tr>
    <td name="items">
      <div>
        <select name="gcard" id="gcard" onchange="return showVersions();">
          <option value="nvidia">NVIDIA</option>
          <option value="amd">AMD</option>
        </select>
      </div>
      <div>
        <select name="gcard" id="nvidiaversion" style="visibility: hidden;" onchange="itemPrice1();">
          <option value="gtx300">GTX 300</option>
          <option value="fgt4000">FGT 4000</option>
        </select>
      </div>
      <div>
        <select name="gcard" id="amdversion" style="visibility: hidden;" onchange="itemPrice2();">
          <option value="amd20">AMD 20</option>
          <option value="krt30">KRT 30</option>
        </select>
      </div>
    </td>
    <td id="unit">
    </td>
    <td name="quantity">
      <div>
        <select name="quantity" id="quantity" onchange="quantity();">
          <option value="0">Quantity</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
    </td>
    <td id="price">
    </td>
  </tr>
</table>