How to use values in HTML form in javascript function

Question

Hey Guys this is my first project so forgive me if this question is a bit basic. I'm trying to use information gathered from HTML forms to complete a javascript function and return the result to the user. The prompt comes back as NaN with a textbox. Why is my function failing?

I can't find anything specifically answering this question so any help would be great.

<script>
  function avgHigh() {
    var open1 = document.getElementById("open1");
    var high1 = document.getElementById("high1");
    prompt(high1/open1)
  }
</script>

<table style="width:300px">
  <tr>
    <td>Opening Rate 1:
      <input type="text" id="open1" value="22" />
    </td>
    <td>High Rate 1:
      <input type="text" id="high1" value="33">
    </td>
    <td>Low Rate 1:
      <input type="text" id="low1" value="323">
    </td>
    <td>Close Rate 1:
      <input type="text" id="close1" value="234">
    </td>
  </tr>
  <tr>
    <td>Opening Rate 2:
      <input type="Text" id="open2" value="345">
    </td>
    <td>High Rate 2:
      <input type="text" id="high2" value="345">
    </td>
    <td>Low Rate 2:
      <input type="text" id="low2" value="345">
    </td>
    <td>Close Rate 2:
      <input type="text" id="close2" value="654">
    </td>
  </tr>
  <tr>
    <td>Opening Rate 3:
      <input type="Text" id="open3" value="456">
    </td>
    <td>High Rate 3:
      <input type="text" id="high3" value="456">
    </td>
    <td>Low Rate 3:
      <input type="text" id="low3" value="83">
    </td>
    <td>Close Rate 3:
      <input type="text" id="close3" value="75">
    </td>
  </tr>
  <tr>
    <td>Opening Rate 4:
      <input type="Text" id="open4" value="3457">
    </td>
    <td>High Rate 4:
      <input type="text" id="high4" value="357">
    </td>
    <td>Low Rate 4:
      <input type="text" id="low4" value="357">
    </td>
    <td>Close Rate 4:
      <input type="text" id="close4" value="0876">
    </td>
  </tr>
  <tr>
    <td>Opening Rate 5:
      <input type="Text" id="open5" value="576">
    </td>
    <td>High Rate 5:
      <input type="text" id="high5" value="456">
    </td>
    <td>Low Rate 5:
      <input type="text" id="low5" value="6458">
    </td>
    <td>Close Rate 5:
      <input type="text" id="close5" value="456">
    </td>

  </tr>
</table>

<input type='button' onclick="avgHigh()" value='Growth on Day 1 (%)' />

vaso123 · Accepted Answer · 2014-11-05 13:08:32Z

3

Use value.

var open1 = document.getElementById("open1").value;
var high1 = document.getElementById("high1").value;
prompt(high1/open1)

answered Nov 5, 2014 at 13:08

vaso123

12.4k4 gold badges37 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4218594 Over a year ago

Thanks! I still can't understand why there's a text box in the prompt?

Quentin · Accepted Answer · 2014-11-05 13:09:17Z

1

You are trying to divide an HTMLInputElement by another HTMLInputElement, which doesn't make sense.

You need to get their values (with the .value property).

answered Nov 5, 2014 at 13:09

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

How to use values in HTML form in javascript function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related