How to get input from textarea to javascript function?

Question

I'm trying to create a pig latin translator that takes input from a textarea and sends it to my javascript function for translation. I hit the submit button and nothing happens when I try it out.

Here is my javascript code:

 function translate(String sentence) { String sentence = document.getElementById("sentence").value; int wordStart = -1; int wordEnd = -1; String letter; String fullSentence; for (int i = 0; i < sentence.length(); i++) { String trans; char c = Character.toLowerCase(sentence.charAt(i)) if (wordStart === -1 && (c !== ' ' || c !== '.' || c !== ',' || c !== '!' || c !== '?')) { wordStart = i; letter = c; } if (wordEnd === -1 && (c === ' ' || c === '.' || c === ',' || c === '!' || c === '?' || i === sentence.length() - 1)) { wordEnd = i; } if (wordStart !== -1 && wordEnd !== -1 && (letter !== 'a' || letter !== 'e' || letter !== 'i' || letter !== 'o' || letter !== 'u')) { trans = sentence.subString(wordStart + 1, wordEnd) + letter + "ay"; wordStart = -1; wordEnd = -1; } if (wordStart !== -1 && wordEnd !== -1 && (letter === 'a' || letter === 'e' || letter === 'i' || letter === 'o' || letter === 'u')) { trans = sentence.subString(wordStart, wordEnd) + "way"; wordStart = -1; wordEnd = -1; } fullSentence = fullSentence + trans + " "; } document.getElementById("output").innerHTML = fullSentence; } 

 <div style="font-size: 25pt; text-align: center">Pig Latin Translator</div><br /><br /> <div style="font-size: 15pt; text-align: center"> Enter text to be translated: <form id="piglatin" action=""> <textarea id="sentence" rows="5" cols="30"></textarea><br /> <input type="button" name="submit" value="Submit" onclick="translate('sentence')" /> </form> </div> <div id="output"></div> 

Basically I'm not sure if the problem lies where I'm trying to send the info to my JS function, or if the problem is IN the JS function.

Answer 1

Open the Developer Tools in your browser. Look at the Console. You will see numerous error messages.

You appear to be writing Java, but JavaScript is a completely different programming language with little more in common with Java than Carpet does with Car.

The question you ask in the title is one of the things you actually got correct: document.getElementById("sentence").value;

MDN has some introductory JavaScript tutorials . You need to learn that language and not just write Java.

Answer 2

Your code is Java, not javascript.

The code can be rewritten for example like this (syntactically speaking). I'm affraid, it does not do what you expect it to do, but it works and the browser understands it.

function translate() {

  var sentence = document.getElementById("sentence").value;
  var wordStart = -1;
  var wordEnd = -1;
  var letter;

  var fullSentence;
  for (var i = 0; i < sentence.length; i++) {
    var trans;
    var c = sentence.charAt(i).toLowerCase();

    if (wordStart === -1 && (c !== ' ' || c !== '.' || c !== ',' || c !== '!' || c !== '?')) {
      wordStart = i;
      letter = c;
    }

    if (wordEnd === -1 && (c === ' ' || c === '.' || c === ',' || c === '!' || c === '?' || i === sentence.length - 1)) {
      wordEnd = i;
    }

    if (wordStart !== -1 && wordEnd !== -1 && (letter !== 'a' || letter !== 'e' || letter !== 'i' || letter !== 'o' || letter !== 'u')) {
      trans = sentence.substring(wordStart + 1, wordEnd) + letter + "ay";

      wordStart = -1;
      wordEnd = -1;
    }

    if (wordStart !== -1 && wordEnd !== -1 && (letter === 'a' || letter === 'e' || letter === 'i' || letter === 'o' || letter === 'u')) {
      trans = sentence.substring(wordStart, wordEnd) + "way";

      wordStart = -1;
      wordEnd = -1;
    }

    fullSentence = fullSentence + trans + " ";
  }

  document.getElementById("output").innerHTML = fullSentence;

}

Looking to some decent JS tutorial as mentioned in other answers would help.

Happy coding

You can experiment with the javascript function for your page fragmet here in JSFidddle I created.

Answer 3

Here is somewhat working code. You still need to modify your logic, because your result is not accurate.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div style="font-size: 25pt; text-align: center">Pig Latin Translator</div> <br /><br /> <div style="font-size: 15pt; text-align: center"> Enter text to be translated: </br> <textarea id="sentence" rows="5" cols="30"></textarea><br /> <button onclick="Translate()">Submit</button> </div> <div id="output"></div> <script type="text/javascript"> function Translate() { var sentence = document.getElementById("sentence").value; var wordStart = -1; var wordEnd = -1; var letter; var fullSentence; for (let i = 0; i < sentence.length; i++) { var trans; var c = sentence.charAt(i).toLowerCase(); if (wordStart === -1 && (c !== " " || c !== "." || c !== "," || c !== "!" || c !== "?")) { wordStart = i; letter = c; } if ( wordEnd === -1 && (c === " " || c === "." || c === "," || c === "!" || c === "?" || i === sentence.length - 1) ) { wordEnd = i; } if ( wordStart !== -1 && wordEnd !== -1 && (letter !== "a" || letter !== "e" || letter !== "i" || letter !== "o" || letter !== "u") ) { trans = sentence.substring(wordStart + 1, wordEnd) + letter + "ay"; wordStart = -1; wordEnd = -1; } if ( wordStart !== -1 && wordEnd !== -1 && (letter === "a" || letter === "e" || letter === "i" || letter === "o" || letter === "u") ) { trans = sentence.substring(wordStart, wordEnd) + "way"; wordStart = -1; wordEnd = -1; } fullSentence = fullSentence + trans + " "; } document.getElementById("output").innerHTML = fullSentence; } </script> </body> </html>