Рандомизировать тег html с помощью JavaScript

Question

Я хотел использовать функцию Google Chrome, называемую тематическим цветом. Обычный синтаксис выглядит так:

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

Однако я хочу использовать 3 разных цвета, поэтому я придумал этот код. Стоит отметить, что у меня нет опыта работы с JavaScript, поэтому, пожалуйста, скажите мне, что не так с кодом. То, что я хочу сделать, это то, что он ramdomly выбирает число, и с этим номером он изменяет содержимое = «значение» с указанными ниже.

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

Не то, что вы просили, но если у вас есть доступ к PHP, то вы можете использовать в качестве альтернативы:

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

И тогда в вашей мета-тег: <meta name="theme-color" content="<?php echo randomTheme(); ?>">

Вы также можете сделать функцию как так что, но я предпочитаю более длинную версию, чтобы вы могли отметить, какие цвета в гексагонах - это то, что по имени у них. Это решение подходит для нескольких цветов, но первое решение подходит для большого списка.

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

    return $themeColor[$randomThemeColor]; 
    } 
    ?> 

Answer 2

Итак, сначала вы можете объединить, если заявления, чтобы сэкономить на время выполнения, как так:

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

Кроме того, если вы заметили, что я изменил x = 2 и x = 3 к x == 2 и x == 3, потому что один знак равенства является а двойное равенство - оператор сравнения. Поэтому, когда вы думаете, что проверяете, если x = 2, вы фактически устанавливаете x на 2.

Также обратите внимание на то, что добавляется в комментариях, это просто очевидные ошибки JavaScript.