Random Color Code issue

[ososo99]

Hi Corvoid community, I’m new here, and I’m not really a programmer but I really try my best with that. Anyway, I tried to use a code to give me a random color for my text every time, I searched google, and I found that code and used it in the “Site Code” Tab:

Now that I have my new function for generating random color I tried to use it for my text that I’m trying to work with, and so I did that(in the text’s Style code):

( you can see I replaced the code rgb(#,#,#) or (HSB#) with the new function code)

But however I didn’t get what I want, I hope someone has the answer for me, Thanks <3

[J.D]

That’s because you inserted it into a string and it recognized as part of the string instead of a call for function.
What you should do is (instead of the current quote mark you have in the begging and end of the html string), put your html string inside (it’s the button on the left of the number 1 key in standard keyboards):

`my html string`

and for the function inside the string, do:

${getRandomColor()}

This way it’ll treat is as the function call .
For more info, see here:
Template literals (Template strings) - JavaScript | MDN

[ososo99]

Thanks for helping

instead of ‘my html string’ I used my html string

and for the ( style = color … ) part I used

<span style= "color: $w{getRandomColor}">

is that right?

it still doesn’t work anyway I’m not sure if I did that in the right way

thank you again <3

[J.D]

you forgot the parentheses ${getRandomColor () }

[ososo99]

oh sry I forgot them in here but I had them there it won’t work

[J.D]

Can you paste your code here (not a screenshot)?

[ososo99]

sure
here is the code for the function, I put it in the “site” tab:

$w.onReady(function getRandomColor() {

 var letters = '0123456789ABCDEF';
 var color = '#';
 for (var i = 0; i < 6; i++) {
     color += letters[Math.floor(Math.random() * 16)];
  }
 return color;
 
 
 

and the code for my text:

export function text10_mouseIn(event) {

    $w('#text10').html= `<h2 style="font-size:44px; text-align:center" class="font_2"><span style= "color: $w{getRandomColor()}"><span style="font-size:44px"><span style="font-family:avenir-lt-w01_35-light1475496,sans-serif">Big Title</span></span></span></h2></body>`
}

thank you <3

[J.D]

You have a few errors:

1. You need to have } after return color;

2. You have some mistakes in your html string (for example, you used $w instead of $, omitted semi-colon, added extra-space).
   See here the correct html:

 
`<h2 style="font-size:44px; text-align:center" class="font_2"><span style= "color:${getRandomColor()};"><span style="font-size:44px"><span style="font-family:avenir-lt-w01_35-light1475496,sans-serif">Big Title</span></span></span></h2></body>`

[J.D]

• put it outside the onReady() function. Like this:

 
function getRandomColor() {
 var letters = '0123456789ABCDEF';
 var color = '#';
 for (var i = 0; i < 6; i++) {
     color += letters[Math.floor(Math.random() * 16)];
  }
 return color;
}

[ososo99]

Thank you very much, but, when I use $ insted of $w it gives me an error saying:“‘getRandomColor’ is not defined”, and if I used $w it does not work neither, I’m sorry I know I’m being so demanding but this is the last thing I want to make for my website

[J.D]

As i said put the function getRandom() outside the onReady(). If you leave it inside the onReady function, you’ll get this error.
Here is the full page code. Copy&Paste it:

function getRandomColor() {
 var letters = '0123456789ABCDEF';
 var color = '#';
 for (var i = 0; i < 6; i++) {
     color += letters[Math.floor(Math.random() * 16)];
  }
 return color;
}

export function text10_mouseIn(event) {
    $w('#text10').html= `<h2 style="font-size:44px; text-align:center" class="font_2"><span style= "color:${getRandomColor()};"><span style="font-size:44px"><span style="font-family:avenir-lt-w01_35-light1475496,sans-serif">Big Title</span></span></span></h2></body>`;
}

[ososo99]

ooooh, I’m so bad I was using the function on the tab “site” and the text’s code in the tab “page” ,that was the problem the whole time, Thank you sooo much dude I don’t know how to thank you enough T-T​:heart:

[J.D]

Yup. If you declare a variable or a function on the site panel, you can’t just use it on the page section.
You’re welcome.