Randomize an html tag with JavaScript

Question

I wanted to use Google Chrome's feature called theme-color. The normal syntax looks like this:

<meta name="theme-color" content="#c12432">

However i want to use 3 different colors so I came up with this code. It's worth metioning that I don't have experience with JavaScript so please tell me what's wrong with the code. What i want to do is that it ramdomly chooses a number and with that number it changes the content="value" with the ones specified below.

function colorchanger() {
     var x = Math.floor((Math.random() * 3) + 1);
     if (x >= 3) {
            document.getElementByName("theme-color").content = "#c12432";
        }
     if (x = 2) {
            document.getElementByName("theme-color").content = "#338fc4";
        }
     if (x = 1) {
            document.getElementByName("theme-color").content = "#d99e33";
        }
    }

Maybe [`.setAttribute('content', '#WHATEV')`](https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute)? — Marty, Apr 01 '16 at 03:27
It's [_getElement**s**ByName_](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName) — Tushar, Apr 01 '16 at 03:30
hit f12, this will open your console. In your console you can see errors such as "uncaught typeerror: document.getElementByName is not a function" though it varies per browser that is generally what your code will throw and how you can detect it. — scrappedcola, Apr 01 '16 at 03:32

Jesse Elser · Accepted Answer · 2016-04-01T03:46:34.157

Not what you asked for but if you have access to PHP then you can use as an alternative:

<?php
randomTheme() {
$themeColor[] = "#c12432"; // Color Name I.E. Red
$themeColor[] = "#338fc4"; // Color Name I.E. Blue
$themeColor[] = "#d99e33"; // Color Name I.E. Yellow
$randomThemeColor = array_rand($themeColor);

return $themeColor[$randomThemeColor];
}
?>

And then in your meta tag: <meta name="theme-color" content="<?php echo randomTheme(); ?>">

You can also make the function like so, but I prefer the longer version so you can note what hex colors are what by a name beside them. This solution is good for a few colors, but the first solution is good for a big list.

 <?php
    randomTheme() {
    $themeColor = array("#c12432","#338fc4","#d99e33");
    $randomThemeColor = array_rand($themeColor);

    return $themeColor[$randomThemeColor];
    }
    ?>

score 0 · Answer 2 · answered Apr 01 '16 at 03:31

So first you can combine your if statements to save on run time like so:

 if (x >= 3) {
        document.getElementByName("theme-color").content = "#c12432";
    }
 else if (x == 2) {
        document.getElementByName("theme-color").content = "#338fc4";
    }
 else if (x == 1) {
        document.getElementByName("theme-color").content = "#d99e33";
    }

Also, if you noticed I changed x = 2 and x = 3 to x == 2 and x == 3 because one equal sign is an assignment while the double equal is the comparison operator. Therefore when you think you're checking if x = 2 you are actually setting x to 2.

Also take consideration to what is being added in the comments, these are just obvious JavaScript errors.

Randomize an html tag with JavaScript

2 Answers2