javascript сделать изменение цвета фона каждый раз, когда вы нажимаете

Question

Так что я делаю эту кнопку, которая меняет цвет фона при нажатии на нее, но когда вы нажмете ее снова, цвет вернется к умолчанию (цвет был до того, как вы впервые нажали). это мой HTML:

<span onclick="Switch(this)" class="button" id="button1">button</span> 

и мой JavaScript:

<script type="text/javascript"> 
     function Switch(obj) { 
      var div = document.getElementById(obj); 
      if(div.style.backgroundColor === "#6DFC93"){ 
       div.style.backgroundColor = "#27D956"; 
      }else{ 
       div.style.backgroundColor = "#6DFC93"; 
      } 

     } 
    </script> 

Любые предложения?

Answer 1

У вас уже есть объект, почему getElementById?

function Switch(obj) { 
      if(obj.style.backgroundColor === "#6DFC93"){ 
       obj.style.backgroundColor = "#27D956"; 
      }else{ 
       obj.style.backgroundColor = "#6DFC93"; 
      } 

     } 

Answer 2

Если вы хотите изменить цвет сразу после первого щелчка, тогда это должно работать нормально.

функция Switch (obj) { obj.style.backgroundColor = "# 27D956";

Answer 3

Что вы можете сделать, это сделать массив цветов и использовать math.random для случайного выбора цвета из этого массива каждый раз, когда вы нажимаете кнопку. его нагрузки забавы на кнопку затирают кнопку!

Надеется, что это помогает

var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643']; 
 
       
 
function clickMe(){ 
 
    var randomize = Math.floor(Math.random()*myColors.length); 
 
    $('.box').css("background-color", myColors[randomize]); 
 
}

.THEbtn{ 
 
    border: 1px solid #323643; 
 
    border-radius: 50px; 
 
} 
 

 
.box{ 
 
    margin-top: 10px; 
 
    height: 300px; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class='THEbtn' onclick='clickMe()'>Click Me</button> 
 

 
<div class='box'></div>

Answer 4

несколько иного маршруту, который применит, если у вас также есть доступ к CSS, можно просто переключить класс, который меняет цвет

element.classList.toggle('button--isSwitched') 

Обратите внимание, что classList не поддерживается абсолютно везде, но имеются полиполки.

.button { 
    background-color: blue; 
} 

.button--isSwitched { 
    background-color: red; 
} 

Answer 5

Ссылаясь на How to get hex color value rather than RGB value?, и принимая во внимание, что параметр, переданный функции коммутатора уже текущий объект, мое решение (значение obj.style.backgroundColor в формате RGB):

var hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"); 
 

 
function rgb2hex(rgb) { 
 
    if (rgb.trim().length == 0) { 
 
    return ""; 
 
    } 
 
    var savedValue = rgb; 
 
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
 
    if (rgb == null) { 
 
    return savedValue; // if not RGB format 
 
    } 
 
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
 
} 
 

 
function hex(x) { 
 
    return isNaN(x) ? "00" : hexDigits[(x - x % 16)/16] + hexDigits[x % 16]; 
 
} 
 

 

 
function Switch(obj) { 
 
    if(rgb2hex(obj.style.backgroundColor) == "#6DFC93"){ 
 
    obj.style.backgroundColor = "#27D956"; 
 
    }else{ 
 
    obj.style.backgroundColor = "#6DFC93"; 
 
    } 
 
}

<span onclick="Switch(this)" class="button" id="button1">button</span>