Home > database >  I would like to know how I can make the "namePrinter" loop function work well?
I would like to know how I can make the "namePrinter" loop function work well?

Time:04-08

I was trying to get javascript to print the result of the "generateName" function at least 10 times when I press a button in the html, so i tried a loop inside the function that generates the names and but it didn't work then I separated the loop and wrote it in the function "namePrinter" and create the global variable "names" to store the results of the function "generateName" but I don't know what part of this whole process is wrong, I already reviewed other questions that were made in this forum but I didn't find an answer either

JS:

//this run the funtion that prints the names
document.getElementById("elvenFemButton").onclick = namePrinter;

//cutting characters function
function capFirst(string){
    return string.charAt(10).toUpperCase()   string.slice(1);
}

//Randomizer
function getRandomInt (min,max){
    return Math.floor(Math.random() * (max-min))   min;
}

//this function generates names using both "elfFemName" and "elfLastName" and the functions from above
function generateName(){
    var elfFemName1 = ["Adaia","Alisaie","Allisara","Alengwan","Alglaranna","Alachia","Alysia","Amberle","Anethra","Anwen","Apolline","Arathel","Ariane","Arianni","Ariel","Arwen","Ashalle","Ashniel","Atara","Ayara","Brelyna","Briala","Celebrían","Clothild","Cullich","Cylia","Dalish","Dirael","Eldyra","Elanor","Elenwen","Elezen","Ellia","Elynea","Éowyn","Failla","Faralda","Fleur","Freyalise","Galadriel","Gheyna","Jenassa","Katriel","Kira","Laina","Laniatte","Lauriel","Liallan","Liriel","Liselle","Loriel","Lorian","Lúthien","Máire","Mayael","Merril","Miara","Mihris","Minaeve","Nadja","Niranye","Nirya","Raewyn","Selveni","Sera","Shaera","Siofra","Taarie","Tauriel","Valora","Valya","Vanadis","Vanora","Velanna","Ylthin","Ysayle","Yvraine","Zelda"];
    var elfLastName2 =  ["Aearonian"," Agaraen","Agarher","Agarvran","Aire","Airendil","Amamion","Amdirthor","Amathal","Amather","Amathuilos","Amatheldir ","Amlugol","Aessereg","Aupwe","Calear","Caranagar","Cemno","Duindaer","Duirro","Eilianther","Gaer","Galadher","Gollor","Gulduron","Guldur","Guldurion","Hithaerben","Holiilo","Ingolmondur","Lar","Leucandil","Lanthir","Loeg","Lo","Lumorndaer","Morguldir","Morgulon","Naur","Neithaor","Nullion","Olchanar","Othanar","Olerydon","Ranchon","Rimdor","Rodor","Roher","Rhovanion","Rhovanion","Ruina","Russarocco","Sir","Sirdhemion","Tawaren","Tawarenion","Tawarher","Tordil","Uirchanar","Urendur","Urucher","Yr"];
    var elfFemNameGenerator = capFirst(elfFemName1[getRandomInt(0, elfFemName1.length   2)])   " "   capFirst(elfLastName2[getRandomInt(0,elfLastName2.length  2)]);
    return elfFemNameGenerator;
}

//i want this to get the result's from "generateName" and it should be a global value so i can use it in the next function
var names = generateName();

// this should print the name at least ten times but no
function namePrinter(){
    var text = document.getElementById("textArea");

    for (var i = 0; i < 10; i  ) {
      text[i].innerHTML(`${names}`)
    }
   return namePrinter;
}

CodePudding user response:

innerHTML is not a function, it's a property. So, in the loop use text.innerHTML = name

However, if it's a <textarea> element, then you need to use value property instead:

//this run the funtion that prints the names
document.getElementById("elvenFemButton").onclick = namePrinter;
document.getElementById("elvenFemButton2").onclick = namePrinter2;

//cutting characters function
function capFirst(string){
    return string.charAt(10).toUpperCase()   string.slice(1);
}

//Randomizer
function getRandomInt (min,max){
    return Math.floor(Math.random() * (max-min))   min;
}

//this function generates names using both "elfFemName" and "elfLastName" and the functions from above
function generateName(){
    var elfFemName1 = ["Adaia","Alisaie","Allisara","Alengwan","Alglaranna","Alachia","Alysia","Amberle","Anethra","Anwen","Apolline","Arathel","Ariane","Arianni","Ariel","Arwen","Ashalle","Ashniel","Atara","Ayara","Brelyna","Briala","Celebrían","Clothild","Cullich","Cylia","Dalish","Dirael","Eldyra","Elanor","Elenwen","Elezen","Ellia","Elynea","Éowyn","Failla","Faralda","Fleur","Freyalise","Galadriel","Gheyna","Jenassa","Katriel","Kira","Laina","Laniatte","Lauriel","Liallan","Liriel","Liselle","Loriel","Lorian","Lúthien","Máire","Mayael","Merril","Miara","Mihris","Minaeve","Nadja","Niranye","Nirya","Raewyn","Selveni","Sera","Shaera","Siofra","Taarie","Tauriel","Valora","Valya","Vanadis","Vanora","Velanna","Ylthin","Ysayle","Yvraine","Zelda"];
    var elfLastName2 =  ["Aearonian"," Agaraen","Agarher","Agarvran","Aire","Airendil","Amamion","Amdirthor","Amathal","Amather","Amathuilos","Amatheldir ","Amlugol","Aessereg","Aupwe","Calear","Caranagar","Cemno","Duindaer","Duirro","Eilianther","Gaer","Galadher","Gollor","Gulduron","Guldur","Guldurion","Hithaerben","Holiilo","Ingolmondur","Lar","Leucandil","Lanthir","Loeg","Lo","Lumorndaer","Morguldir","Morgulon","Naur","Neithaor","Nullion","Olchanar","Othanar","Olerydon","Ranchon","Rimdor","Rodor","Roher","Rhovanion","Rhovanion","Ruina","Russarocco","Sir","Sirdhemion","Tawaren","Tawarenion","Tawarher","Tordil","Uirchanar","Urendur","Urucher","Yr"];
    var elfFemNameGenerator = capFirst(elfFemName1[getRandomInt(0, elfFemName1.length)])   " "   capFirst(elfLastName2[getRandomInt(0,elfLastName2.length)]);
    return elfFemNameGenerator;
}

//i want this to get the result's from "generateName" and it should be a global value so i can use it in the next function
var names = generateName();
var names2 = [];
// this should print the name at least ten times but no
function namePrinter(){
    var text = document.getElementById("textArea");

    text.value = ""; //clear previous result
    for (var i = 0; i < 10; i  ) {
      text.value  = names;
    }
}

function namePrinter2(){
    var text = document.getElementById("textArea");

    names2.length = 0; //clear array
    for (var i = 0; i < 10; i  ) {
      names2[names2.length] = generateName();
    }
    text.value = names2;
}
<textarea id="textArea"></textarea>
<button id="elvenFemButton">generate names</button>
<button id="elvenFemButton2">generate different names</button>

This however as you can see will print the same name 10 times, if you need generate 10 names and store them globally, than you'll need save them in the array instead.

P.S. Unrelated, but elfLastName2[getRandomInt(0,elfLastName2.length 2)] is wrong, you can't get value from an index that is larger than length of the array (aka 2 is wrong)

  • Related