Randomize ein HTML-Tag mit JavaScript

Question

Ich wollte Google Chrome-Feature namens theme-color verwenden. Die normale Syntax sieht so aus:

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

Allerdings möchte ich 3 verschiedene Farben verwenden, also kam ich mit diesem Code. Es ist erwähnenswert, dass ich keine Erfahrung mit JavaScript habe. Bitte sagen Sie mir, was mit dem Code nicht stimmt. Was ich tun möchte, ist, dass es eine Zahl zufällig wählt und mit dieser Zahl den Inhalt = "Wert" mit den unten angegebenen ändert.

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"; 
     } 
    } 

Answer 1

Nicht das, was Sie gebeten, aber wenn Sie den Zugriff auf PHP haben, dann können Sie als Alternative verwenden:

<?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]; 
} 
?> 

Und dann in Ihrem Meta-Tag: <meta name="theme-color" content="<?php echo randomTheme(); ?>">

Sie können auch die Funktion machen wie also, aber ich bevorzuge die längere Version, so dass Sie sehen können, welche Hexfarben mit einem Namen neben ihnen sind. Diese Lösung ist gut für ein paar Farben, aber die erste Lösung ist gut für eine große Liste.

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

    return $themeColor[$randomThemeColor]; 
    } 
    ?> 

Answer 2

Also zunächst können Sie Ihre kombinieren, wenn Aussagen wie so auf der Laufzeit zu sparen:

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"; 
    } 

Auch, wenn Sie bemerken, änderte ich x = 2 und x = 3-x == 2 und x == 3 weil ein Gleichheitszeichen ein ist Zuweisung, während das doppelte gleich ist der Vergleichsoperator. Deshalb, wenn Sie denken, dass Sie überprüfen, ob x = 2 Sie setzen tatsächlich X auf 2.

Beachten Sie auch, was in den Kommentaren hinzugefügt wird, das sind nur offensichtlich JavaScript-Fehler.