• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Failing To Call A Function

 
Greenhorn
Posts: 23
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I am trying to learn to use Javascript as a function, run by html in a separate file.
Yes, I have studied what is involved but for some reason my html is NOT calling the function.
And regardless of what the function is supposed to do, I have tried to simplify it
to the equivalent of its simply saying 'Hello, world', but still NOTHING returns
and I am not even sure the html called it in the first place. So here is the trivial function :


and the html :



It will show 3 text boxes for the user to type numbers and then click 'Add Them'.
The results box is disabled and shows an arbitrary value of 36.
For now I would be delighted for the function to return ANY VALUE AT ALL
but the result box sticks stubbornly with '36'. What am I doing wrong ?
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The first thing to check is to see if functions.js being loaded at all. You can use the browser tools to see what resources are included in the page. You could even set a breakpoint at the function to see if it is defined, and later called.
 
Frederick Douglass
Greenhorn
Posts: 23
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

You can use the browser tools to see what resources are included in the page. You could even set a breakpoint at the function to see if it is defined, and later called.



How exactly would I do that in, say, Chrome ?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
See the first section of the Ranch's JavaScript Wiki
 
Frederick Douglass
Greenhorn
Posts: 23
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks. For now I have at least confirmed that the function is actually executing,
so the question is now about passing values back and forth between html and js.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
OK, so now, what is it you are actually trying to accomplish?

Returning a value other than true or false from a submit handler doesn't make a lot of sense. What's your goal?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
And, is this a school assignment, or professional code?
 
Frederick Douglass
Greenhorn
Posts: 23
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
certainly not professional. school is OK as a description.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
OK, so no silly academic restrictions on how to accomplish this?

In that case, this would be done in most of the real word with jQuery assist.

But you still haven't answered the question of what it is you are actually trying to do.
 
Frederick Douglass
Greenhorn
Posts: 23
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sorry, I thought it was obvious enough from the html that the form was for the purpose of adding two numbers keyed in by the user.
I have now finally managed to get the javascript function to do that, using Chrome DevTools.
Thank you showing me that. Now I know how to monitor javascript programs step by step
and especially the value of various variables that they process.

My problem now is that the answer does show but only for a fraction of a second,
after which the numbers in all three text boxes disappear.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Never assume the obvious.

In any case, you should show your updated script. How are you setting the result value into the input element? (Because returning the value from the submit handler ain't gonna do it.)

Likely what is happening is that you are not returning false from the submit handler, so the form is submitting and the page is refreshing.

Is there a reason that you are using a submit button when what you want to do isn't a submit?
 
Frederick Douglass
Greenhorn
Posts: 23
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I know those are perfectly valid questions but the reason I was not bothered about them was
that my MAIN worry here up to now was to get the function to return ANYTHING
and now that DevTools HAS helped me do that, I can worry about them.
( 'Submit', for instance, was simply a case of SEEING WHETHER IT MIGHT JUST WORK. )

Here is my javascript. Now it does the addition ( although without validation ).



As for what it is returning, at least I now realise that, since it is setting a value in a space originally defined
in the html itself, then there is no need to return ANYTHING.

Which leaves my latest question : how exactly does returning 'false' help ?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
When a function is used as an event handler, its return value specifies whether the default action for the event should continue or not. (It gets more complicated than this, but that's another show...)

In the case of a submit handler, returning false prevents the form from being submitted to the server as a result of the event.

And this is why using a submit button for actions other than submitting the form is a bad idea. When you just want a button to do something on the page (like add values), use a button of type "button", rather than "submit".
 
Frederick Douglass
Greenhorn
Posts: 23
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I presume you refer to the html line :



When I change "submit" to "button" I'm back to the bad old days of nothing appearing in the result field.

The other 'submit' line is :


When I change 'submit' to 'click', that immediately generates an error message as per my latest js file :

 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Frederick Douglass wrote:I presume you refer to the html line :



When I change "submit" to "button" I'm back to the bad old days of nothing appearing in the result field.


Using <input> for a button is bit outdated. Use the <button> element.

When I change 'submit' to 'click', that immediately generates an error message


Always include the text of any error message.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Also, the way you are finding elements (document.forms["f1"]["tb3"]) is archaic and fragile.

If you aren't going to adopt jQuery at this point (recommended -- no one professionally creates a scripted page without jQuery or some other framework) you should explore the document's getElementById and getElementByName methods at the minimum.
 
I AM MIGHTY! Especially when I hold this tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic