Full sentence pig latin translator

link to codepen https://codepen.io/robert-carvalho/pen/dBLQNb

I got inspired by the pig latin challenge to try to evolve it into something useful. So I chose to do a simple
web page that converts your english to pig latin.

The problem I am running into is it only displays the result for a fraction of a second then goes blank again. Any suggestions on what is wrong?

Hi komegga :wave:

I think your javascript is correct , the reason behind the problem is that whene you click on the button your form will be submited causing a page refreshe
A simple solution is adding type="button" to your button :slightly_smiling_face:

Note : there are other solutions , like , event.preventDefault() on eventlistiners to stop page refreshe

1 Like

Thank you so much. So simple.

1 Like

Another approach to prevent the form from submitting is to call the translateSentence by adding it to the form’s onsubmit attribute.

<form id="form" onsubmit="translateSentence(event);">

Then, in the translateSentence function, you need to add event as a parameter and call the preventDefault method to prevent the form trying to load a page (in this case the same page).

function translateSentence(event) {

The reason @AbdelliNasredine’s solution works, is because if a form only has a button that does not specify the type or has a type of “submit”, it behaves the same as if it had the type “submit” and will submit the form.


@komegga There is one disadvantage to using @AbdelliNasredine’s suggestion. If the user hits the Enter key, the form will still be submitted and nothing will display. Many users are used to being able to hit the Enter key as a way of submitting the information on a form.

1 Like

Thanks @RandellDawson for that information. I will try to implement it. Would you recommend @AbdelliNasredine answer for something like I have?

Since you can not always control how the user may use the form, I recommend not using that recommendation, because many users will (by habit), hit the Enter key to submit the form, since there is no other input elements to fill out.

@RandellDawson Oh I misread that, now I see. Thank you. I changed it to your way and it works perfectly.