Related
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"
}
}
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>
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()
}
Write a .js function named isAlpha that accepts a character
(i.e., string of length one) and returns true if it is a letter of the
alphabet, and false otherwise. The function should accept both
upper and lower case characters.
I though I had it, but I'm just not sure how to get it to accept punctuation and have it return as false.
var isAlpha = function(chr) {
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"];
for(var i = 0; i < letters; i++){
if(letter === letter[i]){
return true;
}
}
return false;
};
Much less to type (ASCII ftw):
var isAlpha = function(chr) {
chr = chr.toUpperCase();
if (chr < "A" || chr > "Z") {
return false;
}
return true;
}
Maybe:
var isAlpha = function(chr) {
chr = chr.toLowerCase();
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"];
for(var i = 0; i < letters.length; i++){
if(chr == letters[i]){
return true;
}
}
return false;
};
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>