Pig Latin Defective If Statements in checking for Vowels in JavaScript

Question

I was making a pig latin translater for a seminar on programming, but ran into issues with the if statements i was using to check for if the first letter of a word was a vowel. Even when i specifically state that the Boolean "isVowel" is false, it still would print out bananaway, the translation for vowels, rather than ananabay, the translation for consonants.

var button = document.getElementById("button");
var input = document.getElementById("input");


button.addEventListener("click", function(){
  
  var original = String(input.value);
  var translated = "";
  originalArray = original.split(" ");
  
  for (var index = 0; index < originalArray.length; index++) {
    var word = originalArray[index];
    var wordFirstIndex = word[0];
    var rootWord = word.substr(1);
    var isVowel = false;
   
    if (wordFirstIndex = "a") {
      isVowel = true;
    } else if (wordFirstIndex = "e") {
      isVowel = true;
    } else if (wordFirstIndex = "i") {
      isVowel = true;
    } else if (wordFirstIndex = "o") {
      isVowel = true;
    } else if (wordFirstIndex = "u") {
      isVowel = true;
    } else {
      isVowel = false;
    }

    if (isVowel = true) {
      translated += word + "way" + " ";
    } else if (!isVowel) {
      translated += rootWord + wordFirstIndex + "ay" + " ";
    }
  }

 var output = document.getElementById("output").innerHTML = translated;

});

body {
  font-family: courier new;
}

#button {
  color: white;
  background-color: blue;
  border: none;
  padding: 5px 10px;
  font-family: courier new;
}

#input {
  padding: 10px 20px;
  border: 2px;
  border-style: solid;
  border-color: skyblue;
}

#section1 {
  font-size: 15px;
}

#output {
  padding: 5px 50px; 
  font-size: 13px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <pre>
    <textarea id="input" rows="5" cols="40"></textarea>

    <button id="button">Translate</button>
    <section id="section1">
    New text:
    <p id="output"></p>
    </pre>
    </section>
    <script src="script.js"></script>
    </pre>
  </body>
</html>

Assignment in javascript returns value, that was assigned. If statement applies only boolean types, so your expression in parentheses casts to boolean. Asignment always returns a value, as I said. Any value except [NaN, "", null, undefined, 0] casts to false. But as you see you assign string with length = 1, so in parentheses appers boolean value "true". — Nikita, Jan 19 '19 at 21:26

Max Martynov · Answer 1 · 2019-01-19T21:16:08.490

Your problem is in all the if statements.

if (isVowel = true) should be if (isVowel === true) or just if (isVowel).
And the same for if (wordFirstIndex = "a") and all else if below that. Just replace = on ===.

Why. When you do if (wordFirstIndex = "a") you assing the new value to the variable wordFirstIndex. This is the problem. To compare two objects you should use operator == or === (preferred). See this answer to get more info about the differences between == and ===.

Pig Latin Defective If Statements in checking for Vowels in JavaScript

1 Answers1