HTML Javascript calculator calculation bug-CodePudding

I can't get the result when I press calculate when I added the <select> can you please identify the problem here?

I also want some text to be shown along with the result I want to show 2 results in the result box with text like

Width: result

and

Length: result

// searching <form id="calculateForm"> and waiting for submitting
document.querySelector('#calculateForm').addEventListener('submit', function(e) {
  e.preventDefault(); // prevent submitting form (reload page for example)
  result(); // your calculating
})

function result() {
  const x = document.querySelector("#constant").value;
  var unit1 = document.getElementById("unit1").value;
  if (unit1 == "in") {
    x = Number(x) * 0.0254
  }
  if (unit1 == "mm") {
    x = Number(x) * 0.001
  }
  if (unit1 == "cm") {
    x = Number(x) * 0.01
  }
  const y = document.querySelector("#height").value;
  var unit2 = document.getElementById("unit2").value;
  if (unit2 == "in") {
    y = Number(y) * 0.0254
  }
  if (unit2 == "mm") {
    y = Number(y) * 0.001
  }
  if (unit2 == "cm") {
    y = Number(y) * 0.01
  }
  const z = document.querySelector("#freq").value;
  var unit3 = document.getElementById("unit3").value;
  if (unit3 == "mhz") {
    z = Number(z) * 10 ** 6
  }
  if (unit3 == "ghz") {
    z = Number(z) * 10 ** 9
  }
  const result = document.querySelector("#Calculate");
  if (unit4 == "in") {
    result = Number(result) * 0.0254
  }
  if (unit4 == "mm") {
    result = Number(result) * 0.001
  }
  if (unit4 == "result") {
    result = Number(result) * 0.01
  }

  let c = 3 * 10 ** 8;
  let k = Number(x)   1;
  let k2 = k / 2;
  let k3 = Math.sqrt(k2);
  let y1 = Number(z) * 2;
  let w = c / (y1 * k3);

  result.textContent = w;
  result.style.display = "block"; // show it, because [display: none] by default

}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  padding: 10px;
}

#calculateForm {
  max-width: 250px;
  width: 100%;
  margin: 0 auto;
  /* center form vertically */
}

.input-wrapper {
  margin-bottom: 10px;
  /* 10px bottom indent */
}

.input-wrapper label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.43;
  color: #494949;
  display: block;
}

.input-wrapper input[type="text"] {
  border-radius: 3px;
  border: 1px solid #878787;
  background-color: #fff;
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0.8125rem 0.875rem;
  width: 100%;
  outline: none;
  transition: border-color 0.25s ease-in-out;
}

.input-wrapper input[type="text"]:focus {
  border: 2px solid #0070be;
}

button {
  background-image: linear-gradient(108deg, #1999fb, #0039ac);
  background-color: #0070b8;
  color: #fff;
  border: 0;
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
  height: 48px;
  padding: 11px 15px;
  min-width: 3rem;
  width: 100%;
  outline: none;
  cursor: pointer;
}

button:hover {
  background-image: linear-gradient(110deg, #54baff, #0039ac 144%);
}

#Calculate {
  display: none;
  /* hide until getting results */
  border-radius: 3px;
  border: 1px solid #8cc1ec;
  background-color: #e0f1ff;
  padding: 1.4375rem 1.5625rem;
  margin: 20px auto;
  max-width: 250px;
}

<form id="calculateForm">
  <div class="input-wrapper">
    <label for="constant">Di-Electric Constant:</label>
    <input type="text" id="constant" placeholder="Enter Value">
  </div>
  <div class="input_wrapper">
    <select id="unit1" class="input">
      <option value="in">Inches</option>
      <option value="cm">Centimeters</option>
      <option value="mm">Millimeters</option>
    </select>
  </div>

  <div class="input-wrapper">
    <label for="height">Di-Electric Height:</label>
    <input type="text" id="height" placeholder="Enter Value">
    <select id="unit2" class="input">
      <option value="in">Inches</option>
      <option value="cm">Centimeters</option>
      <option value="mm">Millimeters</option>
    </select>
  </div>

  <div class="input-wrapper">
    <label for="freq">Operational Frequency:</label>
    <input type="text" id="freq" placeholder="Enter Value">
    <select id="unit3" class="input">
      <option value="mhz">MHz</option>
      <option value="ghz">GHz</option>

    </select>
  </div>

  <button type="submit">Calculate</button>
  <select id="unit4" class="input">
    <option value="in">Inches</option>
    <option value="cm">Centimeters</option>
    <option value="mm">Millimeters</option>
  </select>
</form>

<div id="Calculate" style="display: block;"></div>

CodePudding user response：

Aside from the Assignment to constant variable. errors due to the misuse of const within the function there are other incomprehensible parts to this function. Admittedly once the const declarations are replaced the function will return a value but the one of the last pieces of code does nothing because of the reference to a DOM element and not a value ( as per comment above ) so I took a leap of faith that this last portion of code was intended to alter the calculated result depending upon the unit selected. Much of the above is greatly simplified by using a lookup matrix to obtain the multiplier for the variables x,y,z and the result - w.

const q=(e,n=document)=>n.querySelector(e);

q('#calculateForm').addEventListener('submit',result);



function result(e) {
  e.preventDefault();
  
  let matrix={
    mm:0.001,
    cm:0.01,
    in:0.0254,
    mhz:Math.pow(10,6),
    ghz:Math.pow(10,9),
    result:0.01,
    neo:011011100110010101101111 //  ;-)
  };
  let x=matrix[ q('#unit1').value ] * Number( q('#constant').value );
  let y=matrix[ q('#unit2').value ] * Number( q('#height').value );
  let z=matrix[ q('#unit3').value ] * Number( q('#freq').value );
  
  let c = 3 * Math.pow(10,8);
  let k = Number(x)   1;
  let k2 = k / 2;
  let k3 = Math.sqrt(k2);
  let y1 = Number(z) * 2;
  let w = c / (y1 * k3);

  let result=matrix[ q('#unit4').value ] * w;

  q('#Calculate').textContent = result;
  q('#Calculate').style.display = "block";
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  padding: 10px;
}

#calculateForm {
  max-width: 250px;
  width: 100%;
  margin: 0 auto;
  /* center form vertically */
}

.input-wrapper {
  margin-bottom: 10px;
  /* 10px bottom indent */
}

.input-wrapper label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.43;
  color: #494949;
  display: block;
}

.input-wrapper input[type="text"] {
  border-radius: 3px;
  border: 1px solid #878787;
  background-color: #fff;
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0.8125rem 0.875rem;
  width: 100%;
  outline: none;
  transition: border-color 0.25s ease-in-out;
}

.input-wrapper input[type="text"]:focus {
  border: 2px solid #0070be;
}

button {
  background-image: linear-gradient(108deg, #1999fb, #0039ac);
  background-color: #0070b8;
  color: #fff;
  border: 0;
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
  height: 48px;
  padding: 11px 15px;
  min-width: 3rem;
  width: 100%;
  outline: none;
  cursor: pointer;
}

button:hover {
  background-image: linear-gradient(110deg, #54baff, #0039ac 144%);
}

#Calculate {
  display: none;
  /* hide until getting results */
  border-radius: 3px;
  border: 1px solid #8cc1ec;
  background-color: #e0f1ff;
  padding: 1.4375rem 1.5625rem;
  margin: 20px auto;
  max-width: 250px;
}

<form id="calculateForm">
  <div class="input-wrapper">
    <label for="constant">Di-Electric Constant:</label>
    <input type="text" id="constant" placeholder="Enter Value">
  </div>
  <div class="input_wrapper">
    <select id="unit1" class="input">
      <option value="in">Inches</option>
      <option value="cm">Centimeters</option>
      <option value="mm">Millimeters</option>
    </select>
  </div>

  <div class="input-wrapper">
    <label for="height">Di-Electric Height:</label>
    <input type="text" id="height" placeholder="Enter Value">
    <select id="unit2" class="input">
      <option value="in">Inches</option>
      <option value="cm">Centimeters</option>
      <option value="mm">Millimeters</option>
    </select>
  </div>

  <div class="input-wrapper">
    <label for="freq">Operational Frequency:</label>
    <input type="text" id="freq" placeholder="Enter Value">
    <select id="unit3" class="input">
      <option value="mhz">MHz</option>
      <option value="ghz">GHz</option>

    </select>
  </div>

  <button type="submit">Calculate</button>
  
  <select id="unit4" class="input">
    <option value="in">Inches</option>
    <option value="cm">Centimeters</option>
    <option value="mm">Millimeters</option>
  </select>
</form>

<div id="Calculate" style="display: block;"></div>

CodePudding user response：

You've created the variable x as a constant.

  function result() {
          const x = document.querySelector("#constant").value;

But then again in a later section, you are trying to assign a value to x

if(unit1=="in")
{
x = Number(x) * 0.0254
}

Use

var x = document.querySelector("#constant").value;