My program keeps outputting "undefined". I am trying to create a function that changes tex-CodePudding

I am trying to create a program that takes a user's input from the html and runs it through a for loop, and then displays the translated input. The problem is that the output just displays undefined. The function that translates the user's input in the inputbox is supposed to be called with the button in the html, but clicking it changes nothing, and the output just stays "undefined"

function whaleTalk() {
  let input = document.getElementById('input').value

  const vowels = ['a', 'e', 'i', 'o', 'u'];

  let resultArray = [];

  for (var i = 0; i < input.length; i  ) {

    for (var j = 0; j < vowels.length; j  ) {

      if (input[i] == vowels[j]) {

        if (input[i] == 'e') {
          resultArray.push('ee');


        } else if (input[i] == 'e') {
          resultArray.push('uu');


        } else {
          resultArray.push(input[i]);

        }
      }
    }
  }

  console.log(resultArray.join('').toUpperCase());
  document.getElementById('input').innerHTML = input;
  document.getElementById('output').innerHTML = resultArray.join('').toUpperCase();
  console.log(resultArray);
}

function translateInput() {
  let userInput = document.getElementById('input').value
  let translateResult = whaleTalk(userInput);
  updateOutput(translateResult);
}

function updateOutput(input) {
  document.getElementById('output').innerHTML = input;
}

whaleTalk();
updateOutput();

<!DOCTYPE html>

<head>

   <title>Whale Talk Translator</title>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <link href="whaletranslator.css" rel="stylesheet" type="text/css" />

<style>



</style>

</head>



<body>

   <header style="color: white;">Whale Talk Translator </header>

<h2>Input anything you want into the box below and hit the button to translate it.</h1>

   <div class="translatorBox">

      <input value="" id="input" type="text" class="inputBox" placeholder="Text to translate">

      <br>

      <div class="container">
         <div class="center">
            <button class="translateButton" onclick="updateOutput()">Translate</button>
         </div>
       </div>
      
      <div class="container">
         <div class="center">
            <button class="reloadButton" onClick="window.location.reload();">Reload</button>
         </div>
       </div>

   </div>

 
   <p style="padding: 2em">Translated input:</p>
   <div class="output">
       <p id="output"></p>

</body>
<script src="whaletranslator.js" type="text/javascript"></script>
</html>

CodePudding user response：

Your function returns undefined because you are not returning anything from it. Try this:

function whaleTalk() {
  let input = document.getElementById('input').value

  const vowels = ['a', 'e', 'i', 'o', 'u'];

  let resultArray = [];

  for (var i = 0; i < input.length; i  ) {

    for (var j = 0; j < vowels.length; j  ) {

      if (input[i] == vowels[j]) {

        if (input[i] == 'e') {
          resultArray.push('ee');


        } else if (input[i] == 'e') {
          resultArray.push('uu');


        } else {
          resultArray.push(input[i]);

        }
      }
    }
  }
  
  return resultsArray.join('').toUpperCase()
}

Now when your translationResult variable will be the string that your updateOutput method will set to the innerHtml of the element with id 'output'. Instead of calling the two methods at the bottom you can now just call translateInput()

CodePudding user response：

You haven't satisfied the argument for the method updateOutput, the "undefined" message is caused because the argument is not defined in your call