How to check every character of string to call function in javascript?

Question

I am making a random password generator. The generating part itself is working, but I don't know how to convert the chars to phonetic. I mean, I got the function, but I don't know how to use it. I need to check every character of the password and call function convertToPhonetic with character being parameter for each character. I think I need to use a for loop, but since I just started I don't know how to properly use for loops. I tried searching it up on google, but found nothing.

JS:

function gen() {
    var symbol = document.getElementById("symbolsCB");
    var number = document.getElementById("numbersCB");
    var upper = document.getElementById("uppersCB");
    var length = document.getElementById("myRange");
    var op = document.getElementById("outputBox");
    var strBox = document.getElementById("strengthBox");
    op.value = '';
    var list=["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
    if (symbol.checked == true) {
        var symbols = ["?", "!", "#", "$", "%", "*", "(", ")", "[", "]", "{", "}", "<", ">"];
        symbols.push.apply(list, symbols);
    }
    if (number.checked == true) {
        var numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
        numbers.push.apply(list, numbers);
    }
    if (upper.checked == true) {
        var uppers = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
        uppers.push.apply(list, uppers);
    }
    for (var i = 0; i < length.value; i++) {
        let char = list[Math.floor(Math.random() * list.length)];
        op.value = op.value + char;
    }
    const password = op.value; /* for future */ 
    var pwl = password.length;  /*   use      */
    if (length.value < 10){
        strBox.value = "Weak password";
        document.body.style.background = "#bf0a33";
    }
    if (length.value >= 10){
        strBox.value = "Strong password";
        document.body.style.background = "#20b422";
    }  

    function convertToPhonetic(character){
        if(character=="a"){return" apple";}if(character=="A"){return" APPLE";}if(character=="b"){return" bestbuy";}if(character=="B"){return" BESTBUY";}if(character=="c"){return" coffee";}if(character=="C"){return" COFFEE";}if(character=="d"){return" drip";}if(character=="D"){return" DRIP";}if(character=="e"){return" egg";}if(character=="E"){return" EGG";}if(character=="f"){return" fruit";}if(character=="F"){return" FRUIT";}if(character=="g"){return" golf";}if(character=="G"){return" GOLF";}if(character=="h"){return" HULU";}if(character=="H"){return" HULU";}if(character=="i"){return" igloo";}if(character=="I"){return" IGLOO";}if(character=="j"){return" jar";}if(character=="J"){return" JAR";}if(character=="k"){return" koala";}if(character=="K"){return" KOALA";}if(character=="l"){return" lion";}if(character=="L"){return" LION";}if(character=="m"){return" monkey";}if(character=="M"){return" MONKEY";}if(character=="n"){return" nut";}if(character=="N"){return" NUT";}if(character=="o"){return" octopus";}if(character=="O"){return" OCTOPUS";}if(character=="p"){return" person";}if(character=="P"){return" PERSON";}if(character=="q"){return" queen";}if(character=="Q"){return" QUEEN";}if(character=="r"){return" rope";}if(character=="R"){return" ROPE";}if(character=="s"){return" skype";}if(character=="S"){return" SKYPE";}if(character=="t"){return" tokyo";}if(character=="T"){return" TOKYO";}if(character=="u"){return" usa";}if(character=="U"){return" USA";}if(character=="v"){return" violin";}if(character=="V"){return" VIOLIN";}if(character=="w"){return" walmart";}if(character=="W"){return" WALMART";}if(character=="x"){return" xbox";}if(character=="X"){return" XBOX";}if(character=="y"){return" yelp";}if(character=="Y"){return" YELP";}if(character=="z"){return" zip";}if(character=="Z"){return" ZIP";}
      else{return " " + character;}
    }

    console.log(password + ", length => " + pwl);
    function showPhonetic(){
    }
}

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
   gen();
  output.innerHTML = this.value;
};
window.onload = function() {
  gen();
};

HTML:

<div class="page" id="page">
  <div>
  <button onclick="gen()"> ↻ </button>
  <input type="text" id="outputBox" disabled="disabled">
  </div>
  <input type="text" id="strengthBox" disabled="disabled">

  <div class="slidecontainer">
    <p id="len">Length: <span id="demo"></span></p>
    <input type="range" min="4" max="40" value="16" class="slider" id="myRange">
  </div>
  <input type="checkbox" name="numbers" id="numbersCB" class="cb" onclick="gen()" checked>
  <label for="numbers">Include Numbers </label>

  <input type="checkbox" name="uppers" id="uppersCB" class="cb" onclick="gen()" checked>
  <label for="uppers">Include Uppercase Letters </label>

  <input type="checkbox" name="symbols" id="symbolsCB" class="cb" onclick="gen()" checked>
  <label for="symbols">Include Symbols </label>

  <span> Remember your password: </span><input id="phoneticPronounciation">
</div>

Please also tell me what the problem is and not just paste a bunch of code.

Do you want your `showPhonetic()` function to return a string replacing a with apple etc? — tHeSiD, Jun 15 '20 at 13:18
yes I want to get every character from the string, and call `convertToPhonetic()` with parameters being characters, all inside the `showPhonetic()` function. — aka_aaryank, Jun 15 '20 at 13:20
and then I want to show all of them in the html input with id `phoneticPronouncation` — aka_aaryank, Jun 15 '20 at 13:20
Does this answer your question? [For-each over an array in JavaScript](https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript) — matvs, Jun 15 '20 at 13:56

tHeSiD · Accepted Answer · 2020-06-15T13:51:01.290

0

You can use Array.Map instead of a for loop if you want to make changes to the entire array.

    function showPhonetic(string) {
        var combined = '';
        var map = Array.prototype.map;
        var phoneticArray = map.call(string, (char) => {
            return convertToPhonetic(char);
        });
        combined = phoneticArray.join(' -');
        return combined;
    }
    var pP = document.getElementById('phoneticPronounciation');
    pP.value = showPhonetic(password);

This function will accept a string (i.e) your password and call the function convertToPhonetic(char) on each character and return an array of all the phonetics. It will then join the array using a separator and return it as a string

In the code you mentioned in the comment, the ID selection is incorrect as its defined as phoneticPronounciation and not zphoneticPronounciation in your html.

function showPhonetic(){
        function showPhonetic(string, char) { /// why twice?
            let combined = ''; // declare empty string

edited Jun 15 '20 at 13:51

answered Jun 15 '20 at 13:30

tHeSiD

4,587
4
29
49

Does not work? Tried console.log instead of return combined, still does not work. Look at raw: https://aaryank.codewizardshq.com/RandomPwGenerator/RandomPwGeneratorTest/js.js – aka_aaryank Jun 15 '20 at 13:46
You are not using the correct ID in the html file, and you are defining show phonetic in showphonetic again. Updating the code – tHeSiD Jun 15 '20 at 13:50
Console error again: Uncaught TypeError: Array.prototype.map called on null or undefined at map () at showPhonetic (js.js:47) at gen (js.js:55) at window.onload (js.js:67) – aka_aaryank Jun 15 '20 at 14:14
Are you even using the complete HTML Tags like head body etc?? I made a demo here with your code, check https://jsfiddle.net/tHeSiD/yg45m96x/ – tHeSiD Jun 15 '20 at 14:20
And my range output isn't changing every time I change the length – aka_aaryank Jun 15 '20 at 14:24
yes, I did use complete HTML tags, but the code became too long to post on here, so I cut them. – aka_aaryank Jun 15 '20 at 14:25
Range output question is out of scope for this question, does the jsfiddle code work for you? regarding the main question of having a phonetics password in the input field? – tHeSiD Jun 15 '20 at 14:32
Yes, I will check this answer. Thanks! – aka_aaryank Jun 15 '20 at 17:46

How to check every character of string to call function in javascript?

1 Answers1