DOM .value attribute not working - returning blank string

Question

For whatever reason, the .value attribute on the input boxes is not returning the values entered. When running it through the Number(), it returns 0, and without it returns a blank string. I have no idea why, I looked at at least a dozen various sites for answers but I can't find an answer. This is really a last-ditch effort to get this thing to work. Thanks in advance, and I hope it's not a dumb syntax thing. Pesky section of code below.

<div>
      <label for="angleAInput">A=</label>
      <input id="angleAInput" type="number" placeholder="mesure en degrés"><br>
      <label for="sideAInput">a=</label>
      <input id="sideAInput" type="number" placeholder="mesure en unités de longueur"><br>
      <label for="sideBInput">b=</label>
      <input id="sideBInput" type="number" placeholder="mesure en unités de longueur">
    </div>
    <div>
      <button class="go">Triangle ou non?</button>
    </div>
    <h2 class="result"></h2>
    <script>
const go = document.querySelector('.go');
const result = document.querySelector('.result');
let A = Number(document.querySelector('#angleAInput').value);
let a = Number(document.querySelector('#sideAInput').value);
let b = Number(document.querySelector('#sideBInput').value);
let bsinA = b * Math.sin(A * Math.PI / 180);

go.addEventListener('click', output);

function output() {
    result.textContent = A;
}
</script>

The "let A = " part is run before any input. The selections belong in the output() function. — JBrooks
– JBrooks, Commented May 6, 2022 at 23:39

Spectric · Accepted Answer · 2022-05-06 23:35:39Z

Those values are the values of the input on page load, not when the user clicks the button.

Retrieve the values inside the click event listener.

<div>
  <label for="angleAInput">A=</label>
  <input id="angleAInput" type="number" placeholder="mesure en degrés"><br>
  <label for="sideAInput">a=</label>
  <input id="sideAInput" type="number" placeholder="mesure en unités de longueur"><br>
  <label for="sideBInput">b=</label>
  <input id="sideBInput" type="number" placeholder="mesure en unités de longueur">
</div>
<div>
  <button class="go">Triangle ou non?</button>
</div>
<h2 class="result"></h2>
<script>
  const go = document.querySelector('.go');
  const result = document.querySelector('.result');

  go.addEventListener('click', output);

  function output() {
    let A = Number(document.querySelector('#angleAInput').value);
    let a = Number(document.querySelector('#sideAInput').value);
    let b = Number(document.querySelector('#sideBInput').value);
    let bsinA = b * Math.sin(A * Math.PI / 180);
    result.textContent = A;
  }
</script>

Collectives™ on Stack Overflow

DOM .value attribute not working - returning blank string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related