Develop Reference

Javascript - generate new random number without displaying old one [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 days ago.
Improve this question
I press the "Generate" button and it it generates a password, that's great but everytime I press the "Generate" button afterwards it only adds to the first password. How can I just generate a new password without the old one being displayed?
I tried adding a plus sign and changing the the arrays to strings.
const characters = ["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", "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", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "~", "`", "!", "#", "#", "$", "%", "^", "&", "*", "(", ")", "_", "-", "+", "=", "{", "[", "}", "]", ",", "|", ":", ";", "<", ">", ".", "?",
"/"
];
let passwordOne = "";
let passwordTwo = "";
let generateBtn = document.getElementById("generate-btn");
let firstPasswordEl = document.getElementById("first-password-el");
let secondPasswordEl = document.getElementById("second-password-el");
function generate() {
randomOne()
firstPasswordEl.textContent += passwordOne
randomTwo()
secondPasswordEl.textContent += passwordTwo
};
function randomOne() {
for (let i = 0; i < 16; i++) {
let character = Math.floor(Math.random() * characters.length)
passwordOne += characters[character]
}
};
function randomTwo() {
for (let i = 0; i < 16; i++) {
let character = Math.floor(Math.random() * characters.length)
passwordTwo += characters[character]
}
};

You're currently using the addition assignment operator to set the text content of your elements. This will add the right hand side to the current value. You could resolve this by swapping to the assignment operator, '='.
firstPasswordEl.textContent = passwordOne

JavaScript not working on embedded object in HTML

I have my index.html file, with an embedded object - which is another HTML file, called list.html.
I made a JavaScript function, to display 4 random strings, that would create list elements and inject them into the ul in list.html, like so:
The object in index.html:
<section class="second-part">
<object id="test" type="text/html" data="list.html"></object>
</section>
Inside the body of list.html:
<section class="list-1">
<ul class="password-1"></ul>
<p>Hello</p>
</section>
<script src="list.js"></script>
My javascript:
let possibleChars = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n", "m", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M", 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "!", "#", "#", "$", "%", "&", "<", ">", "-"];
let password1 = document.getElementById("test").contentDocument.querySelector(".list-1");
let list1 = password1.querySelector(".password-1");
function generatePassword() {
list1.innerHTML = ""; // resets previous passwords
for (let b = 0; b < 4; b++) { // create 4 passwords
let passwordToPut = ""; // resets the password
for (let a = 0; a < 8; a++) { // defines password length (8) {
let i = Math.floor(Math.random() * possibleChars.length); //randomizes the index of possibleChars array
passwordToPut += possibleChars[i]; // build the password thing that will be assigned to password
}
let listElement = document.createElement("li"); // create an empty list element
listElement.appendChild(document.createTextNode(passwordToPut)); // for this list element, create a text node with password to put
list1.appendChild(listElement); // add a list element to the ul with the class "password"
}
}
The p element that says "hello" in list.html shows up, it's just that the ul and li elements do not.
what shows up
What exactly am I doing wrong? Am I embedding list.html properly?

The JavaScript you wrote for the embedded object remains locally scoped to that object.
So when you access the ul element with class password-1 from the list.js file sourced in list.html, the document you are referring to when you call
let password1 = document.getElementById("test").contentDocument.querySelector(".list-1");
is the list.html file. This means that your list.js file has no knowledge of the element with Id test.
So to fix this error, you need to change how you access the elements. I edited some element names for a clearer understanding.
<!-- index.html -->
<section class="second-part">
<object type="text/html" data="list.html" alt="password generator"></object>
</section>
<!-- list.html -->
<section>
<button onclick="generatePassword()">Generate Passwords From within embedded HTML</button>
<ul id="passwords">
<li>pas1</li>
</ul>
</section>
<script src="list.js"></script>
<!-- list.js -->
var possibleChars = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n", "m", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M", 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "!", "#", "#", "$", "%", "&", "<", ">", "-"];
var passwordsUl = document.getElementById("passwords");
function generatePassword() {
passwordsUl.innerHTML = ""; // resets previous passwords
for (let b = 0; b < 4; b++) { // create 4 passwords
let passwordToPut = ""; // resets the password
for (let a = 0; a < 8; a++) { // defines password length (8) {
let i = Math.floor(Math.random() * possibleChars.length); //randomizes the index of possibleChars array
passwordToPut += possibleChars[i]; // build the password thing that will be assigned to password
}
let passwordLi = document.createElement("li"); // create an empty list element
passwordLi.appendChild(document.createTextNode(passwordToPut)); // for this list element, create a text node with password to put
passwordsUl.appendChild(passwordLi); // add a list element to the ul with the class "password"
}
}

What would be the best way to generate proper words for my touch typing practice website?

I needed proper words for my touch typing website. Doesn't have to be a sentence but some actual words. Currently I'm just generating random gibberish which kind of works.
This function generates random text everytime the page is refreshed or the old set of words are completed.
function generateText() {
var easyText = ["a", "s", "d", "w", "r", "t", "h", "j", "n", "m", "i", "o", "v", "e", "f"];
var hardText = ["g", "h", "z", "x", "c", "b", "k", "y", "q", "p", "u", "n", "m", "v", "l"];
var string = "";
count = 0;
while (true) {
if (easy) {
string = createWords(easyText, string);
} else {
string = createWords(hardText, string);
}
if (count > 120) {
break;
}
}
displayText(string);
}
// This function is responsible for generating words. The words can be one to six letters long.
function createWords(array, string) {
var wordLength = Math.ceil(Math.random() * 6);
if (count > 0) {
string = string + " ";
}
for (var i = 0; i < wordLength; i++) {
var character = Math.floor(Math.random() * 15);
string += array[character];
count++;
}
return string;
}
Is there any API or some better way to do this?
Thank you

Here is an amazing snippet at github from #swenzel that doesn't use hard-coded list of words but rather generates english sounding words on the fly using language statistics.
https://gist.github.com/swenzel/70beac153cdf23803f89
var grams = {
" ": {0.6294: "s", 1.0: "t", 0.5166: "i", 0.2635: "c", 0.1255: "h", 0.7882: "a", 0.4297: "w", 0.1915: "b", 0.3464: "o", 0.0603: "f"},
"a": {1.0: "n", 0.507: "l", 0.1379: "i", 0.3973: " ", 0.0446: "y", 0.6368: "r", 0.1865: "c", 0.0895: "m", 0.2906: "s", 0.7853: "t"},
"c": {1.0: "o", 0.078: "r", 0.7882: "h", 0.3303: "t", 0.6334: "e", 0.181: "i", 0.0365: " ", 0.4808: "a", 0.2455: "k", 0.1214: "l"},
"b": {1.0: "e", 0.0168: "s", 0.5666: "o", 0.3311: "l", 0.7064: "a", 0.042: " ", 0.2285: "i", 0.1634: "r", 0.1023: "y", 0.445: "u"},
"e": {1.0: " ", 0.3763: "s", 0.2035: "a", 0.2859: "d", 0.0326: "c", 0.6218: "r", 0.1016: "e", 0.0666: "t", 0.14: "l", 0.4732: "n"},
"d": {0.4397: "e", 1.0: " ", 0.0217: "d", 0.0671: "u", 0.044: "r", 0.0109: "y", 0.2946: "i", 0.0974: "s", 0.1495: "a", 0.2076: "o"},
"g": {0.4683: "h", 1.0: " ", 0.0461: "s", 0.3648: "o", 0.0214: "n", 0.1991: "r", 0.2811: "a", 0.0805: "u", 0.1315: "i", 0.6221: "e"},
"f": {0.1547: "a", 1.0: " ", 0.0923: "t", 0.0555: "u", 0.3867: "e", 0.2186: "f", 0.2981: "r", 0.0235: "l", 0.5046: "i", 0.7035: "o"},
"i": {0.125: "e", 1.0: "n", 0.5324: "s", 0.1826: "d", 0.4017: "c", 0.3255: "o", 0.6677: "t", 0.2528: "l", 0.0382: "g", 0.081: "r"},
"h": {0.0636: "t", 1.0: "e", 0.0099: "y", 0.3911: "i", 0.0382: "r", 0.0043: "n", 0.1563: "o", 0.2699: " ", 0.0219: "u", 0.5663: "a"},
"k": {1.0: "e", 0.0184: "y", 0.2099: "s", 0.0336: "o", 0.1346: "n", 0.0828: "a", 0.664: " ", 0.0066: "u", 0.0526: "l", 0.3508: "i"},
"j": {0.3455: "a", 1.0: "u", 0.0009: "s", 0.0314: " ", 0.2002: "e", 0.0618: "i", 0.0051: "p", 0.0021: "c", 0.6376: "o", 0.0132: "r"},
"m": {1.0: "e", 0.7376: "a", 0.0544: "b", 0.2917: "i", 0.1154: "u", 0.4078: "o", 0.0265: "s", 0.1847: "p", 0.5582: " ", 0.0833: "m"},
"l": {1.0: " ", 0.8256: "e", 0.0557: "s", 0.5064: "i", 0.2714: "o", 0.0221: "u", 0.1913: "y", 0.6551: "l", 0.3799: "a", 0.1173: "d"},
"o": {0.4793: "u", 1.0: "n", 0.8009: " ", 0.0373: "o", 0.3502: "f", 0.1282: "w", 0.0817: "l", 0.1832: "t", 0.6375: "r", 0.2536: "m"},
"n": {1.0: " ", 0.5597: "g", 0.4228: "t", 0.1167: "i", 0.3088: "e", 0.7117: "d", 0.2199: "s", 0.0764: "c", 0.0377: "a", 0.1673: "o"},
"q": {1.0: "u", 0.0059: "l", 0.0136: "b", 0.0017: "s", 0.0348: "i", 0.0218: "a", 0.003: "w", 0.0043: "w", 0.0006: "v", 0.0888: " "},
"p": {1.0: "e", 0.18: "i", 0.5315: "a", 0.4013: "l", 0.8133: "r", 0.124: "p", 0.2815: " ", 0.0687: "u", 0.6631: "o", 0.0274: "t"},
"s": {1.0: " ", 0.2935: "i", 0.1824: "a", 0.3978: "e", 0.5411: "t", 0.0947: "s", 0.1379: "h", 0.053: "u", 0.0224: "p", 0.2328: "o"},
"r": {1.0: "e", 0.1439: "t", 0.0554: "d", 0.2183: "s", 0.0245: "n", 0.5049: "o", 0.7461: " ", 0.0896: "y", 0.4002: "i", 0.3042: "a"},
"u": {1.0: "r", 0.5156: "s", 0.2004: " ", 0.3647: "l", 0.259: "p", 0.1475: "c", 0.6674: "n", 0.0476: "e", 0.8267: "t", 0.0963: "g"},
"t": {0.1525: "a", 0.0368: "u", 1.0: "h", 0.1056: "r", 0.4593: "o", 0.071: "s", 0.3457: "e", 0.7133: " ", 0.0183: "t", 0.243: "i"},
"w": {0.0373: "s", 0.0059: "l", 0.8036: "a", 1.0: "i", 0.6122: "e", 0.3096: "o", 0.1913: " ", 0.0183: "r", 0.4543: "h", 0.0822: "n"},
"v": {1.0: "e", 0.007: "s", 0.0014: "d", 0.0737: "o", 0.0234: " ", 0.0029: "r", 0.1484: "a", 0.0112: "y", 0.339: "i", 0.0045: "u"},
"y": {0.204: "e", 1.0: " ", 0.0681: "i", 0.0136: "l", 0.0314: "t", 0.0223: "m", 0.303: "o", 0.0475: "a", 0.0056: "p", 0.1217: "s"},
"x": {1.0: "p", 0.7464: " ", 0.0368: "u", 0.2706: "i", 0.1089: "c", 0.0215: "h", 0.01: "o", 0.5265: "t", 0.1895: "e", 0.3517: "i"},
"z": {1.0: "e", 0.4678: " ", 0.2055: "o", 0.3289: "i", 0.0684: "y", 0.043: "u", 0.0075: "h", 0.024: "l", 0.6314: "a", 0.1182: "z"}
};
// create a sorted list for all keys
for(var key in grams){
var sorted = [];
for(var p in grams[key])
sorted.push(p);
grams[key].sorted = sorted.sort();
}
function generateWords(n){
if(!n){
n = 1;
}
var words = [];
for(var i=0; i<n; i++){
var w = ' ';
// last will be our 1gram used to find a proper follower
var last = w;
while(true){
var rand = Math.random();
var p_list = grams[last].sorted;
// find the follower corresponding to the random number
// Note: p_list containes the accumulated probabilities of
// the followers.
for(var k=0; k+1 < p_list.length && p_list[k] < rand; k++);
char = grams[last][p_list[k]];
if(char === ' '){
// space indicates end, but we do not want words shorter
// than 5 so make sure we have minimum length
if(w.length > 5)
break;
}
else{
w += char;
}
last = char;
}
// strip the leading space before appending to the list
words.push(w.substring(1));
}
return words;
}
$('#btn').click(function(){
count = parseInt($('#txt').val())
words = generateWords(count)
$('#words').html( '<span>' + words.join('</span>, <span>') + '</span>')
});
.words {
background: yellow;
padding: 10px;
width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt" placeholder="generate how many words?">
<button id="btn">generate</button>
<div id="words"></div>

Javascript/groovy : how to create all possible words up to largest word?

I would like to create a function that creates letter combinations using the alphabet and numbers. I would like to do this in javascript or groovy. Here is where I am at, any help would be greatly appreciated.
def characters = [ "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", "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", 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "-", "_", "[", "]", "+", "^", "\", "-", "_", "[", "]", "+", "^", "\", "!", "#", "#", "$", "%", "*", "(", ")", "+", "<", ">", "|", "?", "/", "\", "`", "~", "œ", "∑", "´", "®", "†", "¥", "¨", "ˆ", "ø", "π", "å", "ß", "∂", "ƒ", "©", "˙", "∆", "k", "¬", "Ω", "≈", "ç", "√", "∫", "˜", "µ", "¡", "™", "£", "¢", "∞", "§", "7", "•", "ª", "º", "–", "≠", "“", "‘", "«", "…", "æ", "≤", "≥", "÷", "`", "⁄", "™", "‹", "›", "fi", "fl", "‡", "°", "·", "‚", "—", "±", "Œ", "„", "´", "‰", "ˇ", "Á", "¨", "ˆ", "Ø", "∏", "”", "’", "«", "»", "Å", "Í", "Î", "Ï", "˝", "Ó", "Ô", "", "Ò", "Ú", "Æ", "¸", "˛", "Ç", "◊", "◊", "ı", "◊", "ı", "˜", "Â", "Â", "¯", "˘", "¿", "÷", "¡", "™", "£", "¢", "∞", "§", "¶", "•", "ª", "º", "–", "≠", "œ", "∑", "´", "®", "†", "¥", "¨", "ˆ", "ø", "π", "“", "‘", "«", "å", "ß", "∂", "ƒ", "©", "˙", "∆", "˚", "¬", "…", "æ", "Ω", "≈", "ç", "√", "∫", "˜", "µ", "≤", "≥", "÷", " " ]
function create_words(){
def word = ""
def total_characters = 2
create_word("a", 1)
}
function create_word(character, number){
characters.each(){ le ->
for(var n = 0; n < characters.size(); n++){
def ch = characters[n]
characters.each(){ letter ->
def word = letter + add_letter(ch, number)
words.add(word)
for(var c = number; c < number_times; c++){
create_word(character, c)
}
}
}
if(!le.equals(" ")){
create_word(characters.next(), 1)
}
}
}
function add_letter(character, number){
if(character == "a"){
return "a" * number
}
return characters.next(character * number)
}

Groovy example that print all word combinations of selected length:
def characters = [ "a", "b", "c", "d", "e", "f"]
int WORD_LENGTH = 3
def combinationList = []
WORD_LENGTH.times{
combinationList << characters
}
combinationList.combinations().each{
println it.join()
}

Choosing a random letter from a-z

How do I choose a random letter from a-z and put it into a heading in
my html by itself and make it replace any other letter that was there
before? I don't know if what I've done works.
function randLetter( ) {
var letters =
("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");
var letter = letters[Math.floor(Math.random()*letters.length)];
return letter
}
$('#letter').html('letter')

For Capital Letters you can use
String.fromCharCode(65+Math.floor(Math.random() * 26))
For Small letters
String.fromCharCode(97+Math.floor(Math.random() * 26))

Have this piece of code for your work
function randLetter() {
var letters = ["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"];
var letter = letters[Math.floor(Math.random() * letters.length)];
return letter
}
$('#letter').html(randLetter())
Fiddle

If you want to replace a random letter in the element that requires some more code. This will replace a random character with a random letter.
function randLetter() {
var letters = ["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"];
var letter = letters[Math.floor(Math.random() * letters.length)];
return letter;
}
var html = $('#letter').html();
var index = Math.floor(Math.random() * html.length);
var char = randLetter();
$('#letter').html(html.substr(0, index) + char + html.substr(index + char.length));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="letter">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>