Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Use loop to generate id's or classes javascript?

Maja0802

Well-Known Coder
Hey!

I am making a generator, where when you press a button (the key in the key-value pair - for instance "kedelig")
After pressen the key, another button shows up: "Find dit indre røvhul".
When you press that, it generates a word consisting of a random value from the array, that matches the key and then a name from the "names".

WHAT I WANT HELP FOR:
I want to style the the "key-buttons" in different colors, they should not all be red. This means that I need classes or id for every button. I was wondering if I can use a loop, to make the system automatically generate id's og classes for the button.


[CODE lang="javascript" highlight="87-89"]//key:value pair (eksempelvis er kedelig en "key" og Tørvetrilleren "value")
røvhulsGenerator = {
"kedelig":["Tørvetrilleren", "Knastørre", "Kampkedelige", "Surmule", "Intetsigende", "Indholdsløse", "Drøvtykkeren", "Søvndyssende"],
"tyk": ["Tykke", "Fede", "Klamme", "Koloenorme", "Kamptunge", "Elefant"],
"en fiasko": ["Fiasko", "Rendestens", "Taber", "Floppet", "Fuser", "Katestrofe","Dødsejler", "Falliterklæringen", "Nitten"],
"alt for meget": ["Frembrusende","Se-mig", "Over-gearede", "Kæmpestore", "Linselussen", ""],
"fortabt": ["Fortabte","Rendestens", "Depri", "Lost", "Ude og skide"],
"uelskelig": ["Ligegyldige", "Uelskelige", "Usexede"],
"belastende": ["Krævende", "Belastende", "Anstrengende", "Besværlige","Møjsommelige", "Trættende","Krævende"],
"svag": ["Svansede", "Svæklinge", "Taber", "Skrøbelige", "Krøblinge", "Skvattet"],
"dum": ["Dumme", "Blanke", "Småt begavede", "Enfoldige", "Uduelige","Inkompetente", "Tungnemme"],
"uempatisk": ["Selvoptagede", "Egotripper", "Overfladiske", "Ufølsomme", "Narcicist", "Hårde"],
"en svindler": ["Svindler", "Hustler", "Faker", "Snydepelsen", "Plattenslageren", "Fusker", "Storsvindler"],
"grim": ["Grimme","Utiltrækkende","Uskønne","Ulækre", "Tudegrimme", "Kiksede","Vederstyggelige", "Frastødende"],
"ubetydelig" : ["Red-verden-tyrannen", "Udskudet", "Flintrende ligegyldige", "Betydningsløse"],
"latterlig" : ["Pauseklovnen", "Grinagtige", "Skvattet"],
"ikke god nok": ["Utilstrækkelige", "Undermåleren", "Fiasko"],
"helt alene": ["Outsider", "Palle-alene-i-verden", "Ensomme", "Solo", "Mutters alene", "Venneløse"],
"et fjols": ["Fjolset", "Taber", "Klaphatten", "Idioten", "Torsken"],
"ved at gå i hundene": ["Rablende", "Nuts", "Skingrende sindsyge", "Neorotiske", "Angste"],
"for indadvendt": ["Eneboeren", "Enspænder", "Outsider", "Særlingen"],
"skrøbelig": ["Svansede", "Svæklinge", "Taber", "Skrøbelige"],
"pinlig": ["Pinlige", "Tåkrummende", "Klovnen", "Kiksede"],
"bangebuks": ["Frygtsomme", "Feje", "Uslinge", "Pivskiden", "Krysteren", "Pjokket", "Bangebuksen", "Skvattet", "Kujonen", "Kyllinge"],
"ikke glad nok": ["Sort-seern", "Surmule"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"doven": ["Dvaske", "Luddovne", "Sløve", "Dovendidrik", "Drivert", "Sofakartoflen", "Slendrianen"],
"skrøbelig":["Sensitive", "Overreagerende", "Papirtynde", "Sarte", "Vakkelvorne"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"anonym": ["Intetsigende", "Ligegyldige", "Tomme","Ligegyldige", "Farveløse", "Flade","Banale"],
"uansvarlig": ["Hovedet-under-armen", "Barnlige", "Umodne"],
"mærkelig":["Kiksede", "Utjekkede", "Crazy", "Sære", "Særegne"],
"uegnet som kæreste": ["Usexede", "Uduelige", "Uønskede"]



}

// navne som kan tilgåes uanset key
names = ["Finn", "Troels", "Ulla", "Tomse", "Sonja", "Frederikke", "Kurt", "Britt", "Søren","Olga", "Trine", "Dorte", "Vicki", "Ove", "Tove", "Heine", "Karen", "Esben", "Susanne", "Rune", "Otto", "Pelle", "Patrick", "Ruth", "Niels", "Elinor", "Pia", "Gitte", "Gunnar", "Gustav", "Lone", "Lars", "Laura", "Ingrid", "Ib", "Ida", "Caya", "Camille", "Christian", "Carl", "Renee", "Rune", "Rebecaa","Uffe", "Ulrich"]

//gemmer den valgte key (adjektivet)
let chosenAdj = ""
//skal bruges til at finde ud af om der allere er lavet en "find dit indre røvhul"- knap
let hasCreatedButton = false

//
function filt(x) {
let navnFilter = []
for (let i = 0; i < names.length; i++) {
const name = names

if (name[0] == x) {
navnFilter.push(name)
}

}
return navnFilter
}

function generate (adj){
const rndAdj = random(røvhulsGenerator[adj])
const name = random(filt(rndAdj[0]))
return rndAdj + "-" + name
}

// Funktion der sørger for ikke at give det samme out-put to gange i træk f.eks (Tørvetrilleren Troels, Tørvetrilleren Troels) DELVIST, forsættes længere nede
function generateUnique(adj, original) {
while (true) {
let g = generate(adj)
if (g != original) {
return g
}
}

}

function setup() {
// put setup code here
let t = createP("Røvhulsgenerator")
t.class("overskrift")
let z = createP("Nogle gange tænker jeg, at jeg er .....")
z.class("sætning")


for (k in røvhulsGenerator) {
const btn = createButton(k)
btn.class("adjBtn")
const x = k.slice()
btn.mousePressed(() => {
chosenAdj = x
z.elt.innerHTML = "Nogle gange tænker jeg, at jeg er " + x

if (!hasCreatedButton) {
let røvhulsknap = createButton("Find dit indre røvhul")
let røvhulsoutput = createP(generate(chosenAdj))
røvhulsknap.mousePressed(() => {
let original = røvhulsoutput.elt.innerHTML
røvhulsoutput.elt.innerHTML = generateUnique(chosenAdj, original)
})
hasCreatedButton = true

røvhulsknap.class("røvhulsknap")
}


})
}

}
[/CODE]
 
Hey!

I am making a generator, where when you press a button (the key in the key-value pair - for instance "kedelig")
After pressen the key, another button shows up: "Find dit indre røvhul".
When you press that, it generates a word consisting of a random value from the array, that matches the key and then a name from the "names".

WHAT I WANT HELP FOR:
I want to style the the "key-buttons" in different colors, they should not all be red. This means that I need classes or id for every button. I was wondering if I can use a loop, to make the system automatically generate id's og classes for the button.


[CODE lang="javascript" highlight="87-89"]//key:value pair (eksempelvis er kedelig en "key" og Tørvetrilleren "value")
røvhulsGenerator = {
"kedelig":["Tørvetrilleren", "Knastørre", "Kampkedelige", "Surmule", "Intetsigende", "Indholdsløse", "Drøvtykkeren", "Søvndyssende"],
"tyk": ["Tykke", "Fede", "Klamme", "Koloenorme", "Kamptunge", "Elefant"],
"en fiasko": ["Fiasko", "Rendestens", "Taber", "Floppet", "Fuser", "Katestrofe","Dødsejler", "Falliterklæringen", "Nitten"],
"alt for meget": ["Frembrusende","Se-mig", "Over-gearede", "Kæmpestore", "Linselussen", ""],
"fortabt": ["Fortabte","Rendestens", "Depri", "Lost", "Ude og skide"],
"uelskelig": ["Ligegyldige", "Uelskelige", "Usexede"],
"belastende": ["Krævende", "Belastende", "Anstrengende", "Besværlige","Møjsommelige", "Trættende","Krævende"],
"svag": ["Svansede", "Svæklinge", "Taber", "Skrøbelige", "Krøblinge", "Skvattet"],
"dum": ["Dumme", "Blanke", "Småt begavede", "Enfoldige", "Uduelige","Inkompetente", "Tungnemme"],
"uempatisk": ["Selvoptagede", "Egotripper", "Overfladiske", "Ufølsomme", "Narcicist", "Hårde"],
"en svindler": ["Svindler", "Hustler", "Faker", "Snydepelsen", "Plattenslageren", "Fusker", "Storsvindler"],
"grim": ["Grimme","Utiltrækkende","Uskønne","Ulækre", "Tudegrimme", "Kiksede","Vederstyggelige", "Frastødende"],
"ubetydelig" : ["Red-verden-tyrannen", "Udskudet", "Flintrende ligegyldige", "Betydningsløse"],
"latterlig" : ["Pauseklovnen", "Grinagtige", "Skvattet"],
"ikke god nok": ["Utilstrækkelige", "Undermåleren", "Fiasko"],
"helt alene": ["Outsider", "Palle-alene-i-verden", "Ensomme", "Solo", "Mutters alene", "Venneløse"],
"et fjols": ["Fjolset", "Taber", "Klaphatten", "Idioten", "Torsken"],
"ved at gå i hundene": ["Rablende", "Nuts", "Skingrende sindsyge", "Neorotiske", "Angste"],
"for indadvendt": ["Eneboeren", "Enspænder", "Outsider", "Særlingen"],
"skrøbelig": ["Svansede", "Svæklinge", "Taber", "Skrøbelige"],
"pinlig": ["Pinlige", "Tåkrummende", "Klovnen", "Kiksede"],
"bangebuks": ["Frygtsomme", "Feje", "Uslinge", "Pivskiden", "Krysteren", "Pjokket", "Bangebuksen", "Skvattet", "Kujonen", "Kyllinge"],
"ikke glad nok": ["Sort-seern", "Surmule"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"doven": ["Dvaske", "Luddovne", "Sløve", "Dovendidrik", "Drivert", "Sofakartoflen", "Slendrianen"],
"skrøbelig":["Sensitive", "Overreagerende", "Papirtynde", "Sarte", "Vakkelvorne"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"anonym": ["Intetsigende", "Ligegyldige", "Tomme","Ligegyldige", "Farveløse", "Flade","Banale"],
"uansvarlig": ["Hovedet-under-armen", "Barnlige", "Umodne"],
"mærkelig":["Kiksede", "Utjekkede", "Crazy", "Sære", "Særegne"],
"uegnet som kæreste": ["Usexede", "Uduelige", "Uønskede"]



}

// navne som kan tilgåes uanset key
names = ["Finn", "Troels", "Ulla", "Tomse", "Sonja", "Frederikke", "Kurt", "Britt", "Søren","Olga", "Trine", "Dorte", "Vicki", "Ove", "Tove", "Heine", "Karen", "Esben", "Susanne", "Rune", "Otto", "Pelle", "Patrick", "Ruth", "Niels", "Elinor", "Pia", "Gitte", "Gunnar", "Gustav", "Lone", "Lars", "Laura", "Ingrid", "Ib", "Ida", "Caya", "Camille", "Christian", "Carl", "Renee", "Rune", "Rebecaa","Uffe", "Ulrich"]

//gemmer den valgte key (adjektivet)
let chosenAdj = ""
//skal bruges til at finde ud af om der allere er lavet en "find dit indre røvhul"- knap
let hasCreatedButton = false

//
function filt(x) {
let navnFilter = []
for (let i = 0; i < names.length; i++) {
const name = names

if (name[0] == x) {
navnFilter.push(name)
}

}
return navnFilter
}

function generate (adj){
const rndAdj = random(røvhulsGenerator[adj])
const name = random(filt(rndAdj[0]))
return rndAdj + "-" + name
}

// Funktion der sørger for ikke at give det samme out-put to gange i træk f.eks (Tørvetrilleren Troels, Tørvetrilleren Troels) DELVIST, forsættes længere nede
function generateUnique(adj, original) {
while (true) {
let g = generate(adj)
if (g != original) {
return g
}
}

}

function setup() {
// put setup code here
let t = createP("Røvhulsgenerator")
t.class("overskrift")
let z = createP("Nogle gange tænker jeg, at jeg er .....")
z.class("sætning")


for (k in røvhulsGenerator) {
const btn = createButton(k)
btn.class("adjBtn")
const x = k.slice()
btn.mousePressed(() => {
chosenAdj = x
z.elt.innerHTML = "Nogle gange tænker jeg, at jeg er " + x

if (!hasCreatedButton) {
let røvhulsknap = createButton("Find dit indre røvhul")
let røvhulsoutput = createP(generate(chosenAdj))
røvhulsknap.mousePressed(() => {
let original = røvhulsoutput.elt.innerHTML
røvhulsoutput.elt.innerHTML = generateUnique(chosenAdj, original)
})
hasCreatedButton = true

røvhulsknap.class("røvhulsknap")
}


})
}

}
[/CODE]

This is the actual generator :)
 

Attachments

  • Skærmbillede 2020-12-02 kl. 13.06.49.png
    Skærmbillede 2020-12-02 kl. 13.06.49.png
    202.5 KB · Views: 3
  • Skærmbillede 2020-12-02 kl. 13.06.57.png
    Skærmbillede 2020-12-02 kl. 13.06.57.png
    222.6 KB · Views: 3
  • Skærmbillede 2020-12-02 kl. 13.07.06.png
    Skærmbillede 2020-12-02 kl. 13.07.06.png
    239.6 KB · Views: 3
Hi :)

Would tagging words with colors in divs upon constructing innerHTML do?
Hey Ivan-moony. ! I am not quite sure I understand what you mean :) The buttoms have the same font-family, text-color and text size, the only things that need to be different are the background color and the hover color for each buttom, so those two elements I need to be able to set.

I have tried using Array for Each, but no luck :
//test classes for btn const classes = Object.keys(røvhulsGenerator); classes.forEach((item, i) => { item.id = i + 1; });
 
Last edited:
Hey Ivan-moony. ! I am not quite sure I understand what you mean :) The buttoms have the same font-family, text-color and text size, the only things that need to be different are the background color and the hover color for each buttom, so those two elements I need to be able to set.

I have tried using Array for Each, but no luck :
//test classes for btn const classes = Object.keys(røvhulsGenerator); classes.forEach((item, i) => { item.id = i + 1; });
I think the code might be right, but I am not sure what Id to use in my css sheet...
 
I'm talking about inlining CSS - one way to do it is upon creation of innerHTML:
JavaScript:
DOMElementOfYourChoice.innerHTML =
    "<div style={background-color: red;}>item1</div>" +
    "<div style={background-color: green;}>item2</div>" +
    "<div style={background-color: blue;}>item3</div>"; // put random colors and items instead noted constant strings

If this is not acceptable, there is also another option. If you have access from javascript, set CSS directly from javascript:
JavaScript:
ItemOfYourChoice.style.backgroundColor = "red"; // replace "red" with a random color

I hope I got css names right (something like that should certainly work).
:)
 
I'm talking about inlining CSS - one way to do it is upon creation of innerHTML:
JavaScript:
DOMElementOfYourChoice.innerHTML =
    "<div style={background-color: red;}>item1</div>" +
    "<div style={background-color: green;}>item2</div>" +
    "<div style={background-color: blue;}>item3</div>"; // put random colors and items instead noted constant strings

If this is not acceptable, there is also another option. If you have access from javascript, set CSS directly from javascript:
JavaScript:
ItemOfYourChoice.style.backgroundColor = "red"; // replace "red" with a random color

I hope I got css names right (something like that should certainly work).
:)
Thanks for your input ivan.mooney!

I am not sure I follow you, javascript is quite new to me...
Can you give me an example from my coding, maybe?

If I want to style the buttom "kedelig" (the key in the first key-value pair), how would I do that using the javascript you show me?
 
You can do something as adding random background color to your buttons.

For example:
JavaScript:
const r = Math.floor(Math.random() * 255)
const g = Math.floor(Math.random() * 255)
const b = Math.floor(Math.random() * 255)
const temp = `rgb(${r},${g},${b})`;

btn.style.backgroundColor = temp;

You could make an array of colors and randomly pick one color out of the array and apply to the button

For example:

JavaScript:
const colors = ['rgb(0,0,0)', 'rgb(255,255,255)'];
const randIndex = Math.floor(Math.random() * colors.length)

btn.style.backgroundColor = colors[randIndex];

Try it out, play around, be creative. :)
 
You can do something as adding random background color to your buttons.

For example:
JavaScript:
const r = Math.floor(Math.random() * 255)
const g = Math.floor(Math.random() * 255)
const b = Math.floor(Math.random() * 255)
const temp = `rgb(${r},${g},${b})`;

btn.style.backgroundColor = temp;

You could make an array of colors and randomly pick one color out of the array and apply to the button

For example:

JavaScript:
const colors = ['rgb(0,0,0)', 'rgb(255,255,255)'];
const randIndex = Math.floor(Math.random() * colors.length)

btn.style.backgroundColor = colors[randIndex];

Try it out, play around, be creative. :)
Hey there. Thanks for the code. I am not looking for the code to generate random colors, but to generate ids to each button automatically. With these id's I can style each button with specific colors :)
 
Ok, I'll need your HTML, css and javascript code to do that.
Of course. Sorry for the delay! [CODE lang="html" title="HTML code"]<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="StyleSheet.css">
<script src="../p5.js"></script>
<script src="sketch.js"></script>
</head>

<body>
<main>
</main>
</body>

</html>
[/CODE]
[CODE lang="javascript" title="js code"]//key:value pair (eksempelvis er kedelig en "key" og Tørvetrilleren "value")
røvhulsGenerator = {
"kedelig_":["Tørvetrilleren", "Knastørre", "Kampkedelige", "Surmule", "Intetsigende", "Indholdsløse", "Drøvtykkeren", "Søvndyssende"],
"tyk_": ["Tykke", "Fede", "Klamme", "Koloenorme", "Kamptunge", "Elefant"],
"en fiasko": ["Fiasko", "Rendestens", "Taber", "Floppet", "Fuser", "Katestrofe","Dødsejler", "Falliterklæringen", "Nitten"],
"alt for meget": ["Frembrusende","Se-mig", "Over-gearede", "Kæmpestore", "Linselussen", ""],
"fortabt": ["Fortabte","Rendestens", "Depri", "Lost", "Ude og skide"],
"uelskelig": ["Ligegyldige", "Uelskelige", "Usexede"],
"belastende": ["Krævende", "Belastende", "Anstrengende", "Besværlige","Møjsommelige", "Trættende","Krævende"],
"svag": ["Svansede", "Svæklinge", "Taber", "Skrøbelige", "Krøblinge", "Skvattet"],
"dum": ["Dumme", "Blanke", "Småt begavede", "Enfoldige", "Uduelige","Inkompetente", "Tungnemme"],
"uempatisk": ["Selvoptagede", "Egotripper", "Overfladiske", "Ufølsomme", "Narcicist", "Hårde"],
"en svindler": ["Svindler", "Hustler", "Faker", "Snydepelsen", "Plattenslageren", "Fusker", "Storsvindler"],
"grim": ["Grimme","Utiltrækkende","Uskønne","Ulækre", "Tudegrimme", "Kiksede","Vederstyggelige", "Frastødende"],
"ubetydelig" : ["Red-verden-tyrannen", "Udskudet", "Flintrende ligegyldige", "Betydningsløse"],
"latterlig" : ["Pauseklovnen", "Grinagtige", "Skvattet"],
"ikke god nok": ["Utilstrækkelige", "Undermåleren", "Fiasko"],
"helt alene": ["Outsider", "Palle-alene-i-verden", "Ensomme", "Solo", "Mutters alene", "Venneløse"],
"et fjols": ["Fjolset", "Taber", "Klaphatten", "Idioten", "Torsken"],
"ved at gå i hundene": ["Rablende", "Nuts", "Skingrende sindsyge", "Neorotiske", "Angste"],
"for indadvendt": ["Eneboeren", "Enspænder", "Outsider", "Særlingen"],
"skrøbelig": ["Svansede", "Svæklinge", "Taber", "Skrøbelige"],
"pinlig": ["Pinlige", "Tåkrummende", "Klovnen", "Kiksede"],
"bangebuks": ["Frygtsomme", "Feje", "Uslinge", "Pivskiden", "Krysteren", "Pjokket", "Bangebuksen", "Skvattet", "Kujonen", "Kyllinge"],
"ikke glad nok": ["Sort-seern", "Surmule"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"doven": ["Dvaske", "Luddovne", "Sløve", "Dovendidrik", "Drivert", "Sofakartoflen", "Slendrianen"],
"skrøbelig":["Sensitive", "Overreagerende", "Papirtynde", "Sarte", "Vakkelvorne"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"anonym": ["Intetsigende", "Ligegyldige", "Tomme","Ligegyldige", "Farveløse", "Flade","Banale"],
"uansvarlig": ["Hovedet-under-armen", "Barnlige", "Umodne"],
"mærkelig":["Kiksede", "Utjekkede", "Crazy", "Sære", "Særegne"],
"uegnet som kæreste": ["Usexede", "Uduelige", "Uønskede"]



}

// navne som kan tilgåes uanset key
names = ["Finn", "Troels", "Ulla", "Tomse", "Sonja", "Frederikke", "Kurt", "Britt", "Søren","Olga", "Trine", "Dorte", "Vicki", "Ove", "Tove", "Heine", "Karen", "Esben", "Susanne", "Rune", "Otto", "Pelle", "Patrick", "Ruth", "Niels", "Elinor", "Pia", "Gitte", "Gunnar", "Gustav", "Lone", "Lars", "Laura", "Ingrid", "Ib", "Ida", "Caya", "Camille", "Christian", "Carl", "Renee", "Rune", "Rebecaa","Uffe", "Ulrich"]

//gemmer den valgte key (adjektivet)
let chosenAdj = ""
//skal bruges til at finde ud af om der allere er lavet en "find dit indre røvhul"- knap
let hasCreatedButton = false

//test classes for btn
//gets the key of the object "Røvhulsgenerator"
const classes = Object.keys(røvhulsGenerator);

//VIRKER IKKE: HVAD ER ID TIL CSS FIL????
classes.forEach((item, index)=>{
item.id = index+1;
});

//
function filt(x) {
let navnFilter = []
for (let i = 0; i < names.length; i++) {
const name = names

if (name[0] == x) {
navnFilter.push(name)
}

}
return navnFilter
}

function generate (adj){
const rndAdj = random(røvhulsGenerator[adj])
const name = random(filt(rndAdj[0]))
return rndAdj + "-" + name
}

// Funktion der sørger for ikke at give det samme out-put to gange i træk f.eks (Tørvetrilleren Troels, Tørvetrilleren Troels) DELVIST, forsættes længere nede
function generateUnique(adj, original) {
while (true) {
let g = generate(adj)
if (g != original) {
return g
}
}

}

//SKAL DENNE BRUGES?
function setup() {
// put setup code here
let t = createP("Røvhulsgenerator")
t.class("overskrift")
let z = createP("Nogle gange tænker jeg, at jeg er .....")
z.class("sætning")


for (k in røvhulsGenerator) {
const btn = createButton(k)
btn.class("adjBtn")

const x = k.slice()
btn.mousePressed(() => {
chosenAdj = x
z.elt.innerHTML = "Nogle gange tænker jeg, at jeg er " + x

if (!hasCreatedButton) {
let røvhulsknap = createButton("Find dit indre røvhul")
let røvhulsoutput = createP(generate(chosenAdj))
røvhulsknap.mousePressed(() => {
let original = røvhulsoutput.elt.innerHTML
røvhulsoutput.elt.innerHTML = generateUnique(chosenAdj, original)
})
hasCreatedButton = true

røvhulsknap.class("røvhulsknap")
}
})
}

}
[/CODE]
[CODE lang="css" title="css code"]
body {
background-color:rgb(252,249,249);
font-size: 60px;
font-family: 'Inconsolata', monospace;
text-align: center;
}
.overskrift {
font-weight: bold;

}

.sætning {
font-size: 30px;
}


.adjBtn {
background: rgb(245, 72, 66);
color: #FFF;
font-size: 40px;
font-weight: bold;
padding: 5px;
border: none;
margin: 20px;
}

.adjBtn:hover {
color: #9e2f2b
}

.røvhulsknap {
background-color: rgb(10,100,192);
color: rgb(251,254,85);
border: none;
font-size: 40px;
font-weight: bold;
padding: 15px;
display: block;
margin: auto auto;
margin-top: 30px;

}

.røvhulsknap:hover {
color: rgb(231,81,81);
}

.røvhul {
color: blue;
background-color: blue;
}
[/CODE]
 
Tx.
I wasn't able to test it (I still miss some of "p5.js" or "sketch.js"), but I think I found the way. I inserted lines 88 and 100. Could you, please, test it and let me know if it works?

[CODE lang="javascript" highlight="88,100"]
//key:value pair (eksempelvis er kedelig en "key" og Tørvetrilleren "value")
røvhulsGenerator = {
"kedelig_":["Tørvetrilleren", "Knastørre", "Kampkedelige", "Surmule", "Intetsigende", "Indholdsløse", "Drøvtykkeren", "Søvndyssende"],
"tyk_": ["Tykke", "Fede", "Klamme", "Koloenorme", "Kamptunge", "Elefant"],
"en fiasko": ["Fiasko", "Rendestens", "Taber", "Floppet", "Fuser", "Katestrofe","Dødsejler", "Falliterklæringen", "Nitten"],
"alt for meget": ["Frembrusende","Se-mig", "Over-gearede", "Kæmpestore", "Linselussen", ""],
"fortabt": ["Fortabte","Rendestens", "Depri", "Lost", "Ude og skide"],
"uelskelig": ["Ligegyldige", "Uelskelige", "Usexede"],
"belastende": ["Krævende", "Belastende", "Anstrengende", "Besværlige","Møjsommelige", "Trættende","Krævende"],
"svag": ["Svansede", "Svæklinge", "Taber", "Skrøbelige", "Krøblinge", "Skvattet"],
"dum": ["Dumme", "Blanke", "Småt begavede", "Enfoldige", "Uduelige","Inkompetente", "Tungnemme"],
"uempatisk": ["Selvoptagede", "Egotripper", "Overfladiske", "Ufølsomme", "Narcicist", "Hårde"],
"en svindler": ["Svindler", "Hustler", "Faker", "Snydepelsen", "Plattenslageren", "Fusker", "Storsvindler"],
"grim": ["Grimme","Utiltrækkende","Uskønne","Ulækre", "Tudegrimme", "Kiksede","Vederstyggelige", "Frastødende"],
"ubetydelig" : ["Red-verden-tyrannen", "Udskudet", "Flintrende ligegyldige", "Betydningsløse"],
"latterlig" : ["Pauseklovnen", "Grinagtige", "Skvattet"],
"ikke god nok": ["Utilstrækkelige", "Undermåleren", "Fiasko"],
"helt alene": ["Outsider", "Palle-alene-i-verden", "Ensomme", "Solo", "Mutters alene", "Venneløse"],
"et fjols": ["Fjolset", "Taber", "Klaphatten", "Idioten", "Torsken"],
"ved at gå i hundene": ["Rablende", "Nuts", "Skingrende sindsyge", "Neorotiske", "Angste"],
"for indadvendt": ["Eneboeren", "Enspænder", "Outsider", "Særlingen"],
"skrøbelig": ["Svansede", "Svæklinge", "Taber", "Skrøbelige"],
"pinlig": ["Pinlige", "Tåkrummende", "Klovnen", "Kiksede"],
"bangebuks": ["Frygtsomme", "Feje", "Uslinge", "Pivskiden", "Krysteren", "Pjokket", "Bangebuksen", "Skvattet", "Kujonen", "Kyllinge"],
"ikke glad nok": ["Sort-seern", "Surmule"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"doven": ["Dvaske", "Luddovne", "Sløve", "Dovendidrik", "Drivert", "Sofakartoflen", "Slendrianen"],
"skrøbelig":["Sensitive", "Overreagerende", "Papirtynde", "Sarte", "Vakkelvorne"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"anonym": ["Intetsigende", "Ligegyldige", "Tomme","Ligegyldige", "Farveløse", "Flade","Banale"],
"uansvarlig": ["Hovedet-under-armen", "Barnlige", "Umodne"],
"mærkelig":["Kiksede", "Utjekkede", "Crazy", "Sære", "Særegne"],
"uegnet som kæreste": ["Usexede", "Uduelige", "Uønskede"]



}

// navne som kan tilgåes uanset key
names = ["Finn", "Troels", "Ulla", "Tomse", "Sonja", "Frederikke", "Kurt", "Britt", "Søren","Olga", "Trine", "Dorte", "Vicki", "Ove", "Tove", "Heine", "Karen", "Esben", "Susanne", "Rune", "Otto", "Pelle", "Patrick", "Ruth", "Niels", "Elinor", "Pia", "Gitte", "Gunnar", "Gustav", "Lone", "Lars", "Laura", "Ingrid", "Ib", "Ida", "Caya", "Camille", "Christian", "Carl", "Renee", "Rune", "Rebecaa","Uffe", "Ulrich"]

//gemmer den valgte key (adjektivet)
let chosenAdj = ""
//skal bruges til at finde ud af om der allere er lavet en "find dit indre røvhul"- knap
let hasCreatedButton = false

//test classes for btn
//gets the key of the object "Røvhulsgenerator"
const classes = Object.keys(røvhulsGenerator);

//VIRKER IKKE: HVAD ER ID TIL CSS FIL????
classes.forEach((item, index)=>{
item.id = index+1;
});

//
function filt(x) {
let navnFilter = []
for (let i = 0; i < names.length; i++) {
const name = names

if (name[0] == x) {
navnFilter.push(name)
}

}
return navnFilter
}

function generate (adj){
const rndAdj = random(røvhulsGenerator[adj])
const name = random(filt(rndAdj[0]))
return rndAdj + "-" + name
}

// Funktion der sørger for ikke at give det samme out-put to gange i træk f.eks (Tørvetrilleren Troels, Tørvetrilleren Troels) DELVIST, forsættes længere nede
function generateUnique(adj, original) {
while (true) {
let g = generate(adj)
if (g != original) {
return g
}
}

}

//SKAL DENNE BRUGES?
colors = ["red", "orange", "green", "cyan", "blue", "purple", "magenta"]
function setup() {
// put setup code here
let t = createP("Røvhulsgenerator")
t.class("overskrift")
let z = createP("Nogle gange tænker jeg, at jeg er .....")
z.class("sætning")


for (k in røvhulsGenerator) {
const btn = createButton(k)
btn.class("adjBtn")
btn.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]

const x = k.slice()
btn.mousePressed(() => {
chosenAdj = x
z.elt.innerHTML = "Nogle gange tænker jeg, at jeg er " + x

if (!hasCreatedButton) {
let røvhulsknap = createButton("Find dit indre røvhul")
let røvhulsoutput = createP(generate(chosenAdj))
røvhulsknap.mousePressed(() => {
let original = røvhulsoutput.elt.innerHTML
røvhulsoutput.elt.innerHTML = generateUnique(chosenAdj, original)
})
hasCreatedButton = true

røvhulsknap.class("røvhulsknap")
}
})
}

}[/CODE]
 
Tx.
I wasn't able to test it (I still miss some of "p5.js" or "sketch.js"), but I think I found the way. I inserted lines 88 and 100. Could you, please, test it and let me know if it works?

[CODE lang="javascript" highlight="88,100"]
//key:value pair (eksempelvis er kedelig en "key" og Tørvetrilleren "value")
røvhulsGenerator = {
"kedelig_":["Tørvetrilleren", "Knastørre", "Kampkedelige", "Surmule", "Intetsigende", "Indholdsløse", "Drøvtykkeren", "Søvndyssende"],
"tyk_": ["Tykke", "Fede", "Klamme", "Koloenorme", "Kamptunge", "Elefant"],
"en fiasko": ["Fiasko", "Rendestens", "Taber", "Floppet", "Fuser", "Katestrofe","Dødsejler", "Falliterklæringen", "Nitten"],
"alt for meget": ["Frembrusende","Se-mig", "Over-gearede", "Kæmpestore", "Linselussen", ""],
"fortabt": ["Fortabte","Rendestens", "Depri", "Lost", "Ude og skide"],
"uelskelig": ["Ligegyldige", "Uelskelige", "Usexede"],
"belastende": ["Krævende", "Belastende", "Anstrengende", "Besværlige","Møjsommelige", "Trættende","Krævende"],
"svag": ["Svansede", "Svæklinge", "Taber", "Skrøbelige", "Krøblinge", "Skvattet"],
"dum": ["Dumme", "Blanke", "Småt begavede", "Enfoldige", "Uduelige","Inkompetente", "Tungnemme"],
"uempatisk": ["Selvoptagede", "Egotripper", "Overfladiske", "Ufølsomme", "Narcicist", "Hårde"],
"en svindler": ["Svindler", "Hustler", "Faker", "Snydepelsen", "Plattenslageren", "Fusker", "Storsvindler"],
"grim": ["Grimme","Utiltrækkende","Uskønne","Ulækre", "Tudegrimme", "Kiksede","Vederstyggelige", "Frastødende"],
"ubetydelig" : ["Red-verden-tyrannen", "Udskudet", "Flintrende ligegyldige", "Betydningsløse"],
"latterlig" : ["Pauseklovnen", "Grinagtige", "Skvattet"],
"ikke god nok": ["Utilstrækkelige", "Undermåleren", "Fiasko"],
"helt alene": ["Outsider", "Palle-alene-i-verden", "Ensomme", "Solo", "Mutters alene", "Venneløse"],
"et fjols": ["Fjolset", "Taber", "Klaphatten", "Idioten", "Torsken"],
"ved at gå i hundene": ["Rablende", "Nuts", "Skingrende sindsyge", "Neorotiske", "Angste"],
"for indadvendt": ["Eneboeren", "Enspænder", "Outsider", "Særlingen"],
"skrøbelig": ["Svansede", "Svæklinge", "Taber", "Skrøbelige"],
"pinlig": ["Pinlige", "Tåkrummende", "Klovnen", "Kiksede"],
"bangebuks": ["Frygtsomme", "Feje", "Uslinge", "Pivskiden", "Krysteren", "Pjokket", "Bangebuksen", "Skvattet", "Kujonen", "Kyllinge"],
"ikke glad nok": ["Sort-seern", "Surmule"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"doven": ["Dvaske", "Luddovne", "Sløve", "Dovendidrik", "Drivert", "Sofakartoflen", "Slendrianen"],
"skrøbelig":["Sensitive", "Overreagerende", "Papirtynde", "Sarte", "Vakkelvorne"],
"selvoptaget": ["Selvfede", "Navlebeskuende", "Pyntesyge", "Selvfikserede", "Ego-tripper"],
"anonym": ["Intetsigende", "Ligegyldige", "Tomme","Ligegyldige", "Farveløse", "Flade","Banale"],
"uansvarlig": ["Hovedet-under-armen", "Barnlige", "Umodne"],
"mærkelig":["Kiksede", "Utjekkede", "Crazy", "Sære", "Særegne"],
"uegnet som kæreste": ["Usexede", "Uduelige", "Uønskede"]



}

// navne som kan tilgåes uanset key
names = ["Finn", "Troels", "Ulla", "Tomse", "Sonja", "Frederikke", "Kurt", "Britt", "Søren","Olga", "Trine", "Dorte", "Vicki", "Ove", "Tove", "Heine", "Karen", "Esben", "Susanne", "Rune", "Otto", "Pelle", "Patrick", "Ruth", "Niels", "Elinor", "Pia", "Gitte", "Gunnar", "Gustav", "Lone", "Lars", "Laura", "Ingrid", "Ib", "Ida", "Caya", "Camille", "Christian", "Carl", "Renee", "Rune", "Rebecaa","Uffe", "Ulrich"]

//gemmer den valgte key (adjektivet)
let chosenAdj = ""
//skal bruges til at finde ud af om der allere er lavet en "find dit indre røvhul"- knap
let hasCreatedButton = false

//test classes for btn
//gets the key of the object "Røvhulsgenerator"
const classes = Object.keys(røvhulsGenerator);

//VIRKER IKKE: HVAD ER ID TIL CSS FIL????
classes.forEach((item, index)=>{
item.id = index+1;
});

//
function filt(x) {
let navnFilter = []
for (let i = 0; i < names.length; i++) {
const name = names

if (name[0] == x) {
navnFilter.push(name)
}

}
return navnFilter
}

function generate (adj){
const rndAdj = random(røvhulsGenerator[adj])
const name = random(filt(rndAdj[0]))
return rndAdj + "-" + name
}

// Funktion der sørger for ikke at give det samme out-put to gange i træk f.eks (Tørvetrilleren Troels, Tørvetrilleren Troels) DELVIST, forsættes længere nede
function generateUnique(adj, original) {
while (true) {
let g = generate(adj)
if (g != original) {
return g
}
}

}

//SKAL DENNE BRUGES?
colors = ["red", "orange", "green", "cyan", "blue", "purple", "magenta"]
function setup() {
// put setup code here
let t = createP("Røvhulsgenerator")
t.class("overskrift")
let z = createP("Nogle gange tænker jeg, at jeg er .....")
z.class("sætning")


for (k in røvhulsGenerator) {
const btn = createButton(k)
btn.class("adjBtn")
btn.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]

const x = k.slice()
btn.mousePressed(() => {
chosenAdj = x
z.elt.innerHTML = "Nogle gange tænker jeg, at jeg er " + x

if (!hasCreatedButton) {
let røvhulsknap = createButton("Find dit indre røvhul")
let røvhulsoutput = createP(generate(chosenAdj))
røvhulsknap.mousePressed(() => {
let original = røvhulsoutput.elt.innerHTML
røvhulsoutput.elt.innerHTML = generateUnique(chosenAdj, original)
})
hasCreatedButton = true

røvhulsknap.class("røvhulsknap")
}
})
}

}[/CODE]

EDIT: ***Found out something i wrong with the code. It is not updating, when new code is applied. I will fix it and see if yours work. *****
Ah yes true. There are a bunch of js5 files....I tried your changes out, it is a good idea, however it does not work. Thanks for trying!
 
Last edited:
Odd, it should work. Here is an alternative of setting class names. At line 100, insert:

JavaScript:
for  (c in colors)
    btn.className = colors[c]

Then adjust css classes of color names.

If not, that btn isn't what we are looking for. We have to locate the real Dom button elements and apply any of the above two methods.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom