How can I get the value from an HTML input box into a CoffeeScript function?

Question

I am learning coffeescript, and I am wanting to make an script that multiplies the number I put in by PI. The issue is in how to get the HTML5 input to the coffeescript code (actually, in the HTML file it is now javascript).

Coffeescript before compiling:

x = y * Math.PI;
alert(x);

HTML5:

<html>
    <head><title>Coffeescript Test</title></head>
    <body>
        <form action="" method="GET">
    <input type="text" name="input" value="NUMBER">
    <input type="button" name="Solve" value="Equals" onClick="Coffee()">
    <span id="result" />
        </form>

        <div id="Coffeescript">
            <script type="text/javascript">
(function Coffee() {
  var x;
  x = y * Math.PI;
  alert(x);
}).call(this);
</script>
        </div>
    </body>
</html>

The variable "y" is supposed to be the input. How do I get a number from the HTML input box to the new javascript code? If possible, give me coffeescript code instead of javascript.

New code after using Paul D. Waite answer (This code works well):

<html>
    <head><title>Coffeescript Test</title></head>
    <body>
        <div id="Coffeescript">
            <script type="text/javascript">
function coffee() {
  var x;
  x = document.querySelectorAll('input[name="pi_input"]')[0].value * Math.PI;
  alert(x);
}
            </script>
        </div>
<form action="" method="GET">
    <input type="text" name="pi_input" value="NUMBER">
    <input type="button" name="Solve" value="Solve" onClick="coffee()">
    <span id="result"/>
</form>
    </body>
</html>

I know that many programmers consider embedded javascript uncustomary, but that is how I like to do my web programming. — Devyn Collier Johnson
– Devyn Collier Johnson, Commented Jun 25, 2013 at 10:56

Paul D. Waite · Accepted Answer · 2013-06-25 11:10:48Z

2

You've almost already done it, but:

There doesn't seem to be a reason to call Coffee straight after defining it, so you can remove that bit:
```
function Coffee() {
  var x;
  x = y * Math.PI;
  alert(x);
}
```
The function will need to get the value from the <input> field. Getting a reference to the field is more reliable with a library like jQuery, but I'll give an example using a native function (it won't be available in all browsers):
```
function Coffee() {
  var x;
  x = document.querySelectorAll('input[name="input"]')[0].value * Math.PI;
  alert(x);
}
```
It might be worth giving the field a more descriptive name.
You might want to include your script in the page before your <input> element, otherwise in theory a user could click on the button before the function is defined.
In JavaScript, there's a convention that only constructor functions (i.e. those intended to be called with the new keyword) should have their name capitalised. So function coffee() might be a better choice.

edited Jun 25, 2013 at 11:10

answered Jun 25, 2013 at 10:57

Paul D. Waite

99.5k57 gold badges204 silver badges275 bronze badges

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

5 Comments

Devyn Collier Johnson Over a year ago

Thank you for the suggestion in number 2. I never knew that. I should have known suggestion 1 - thank you again. Could you explain "anonymous function"? How can I make the HTML file give the input to the javascript code?

Paul D. Waite Over a year ago

@DevynCollierJohnson: sorry, I realised after posting my answer that I hadn't actually answered your question. Answer edited to do so. I also noticed that Coffee actually isn't wrapped in an anonymous function at all (I really need to start reading questions before I answer them!), it's just called straight after being defined.

Devyn Collier Johnson Over a year ago

@Paul-D-Waite, do not feel bad. I tend to do that as well.

Devyn Collier Johnson Over a year ago

I will try your suggestions in about half-an-hour and I will see how it works. Thanks.

Paul D. Waite Over a year ago

@DevynCollierJohnson: hurray!

Collectives™ on Stack Overflow

How can I get the value from an HTML input box into a CoffeeScript function?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related