Кнопка, которая меняет цвет объекта 3 раза

Question

Мне кажется, что здесь не хватает знаний. Я хочу сделать кнопку, которая меняет цвет объекта каждый раз, когда я нажимаю на него. Цвет должен изменяться 3 раза, и он должен зацикливать весь процесс. Вот что я сделал:

var count = 0; 
function myFunction() { 
    if (count == 0) { 
     character.style.backgroundColor = "#000000"; 
     count = 1; 
     console.log(count); 
    } 
    if (count == 1) { 
     character.style.backgroundColor = "#7FFF00"; 
     count = 2; 
     console.log(count); 
    } 
    else { 
     character.style.backgroundColor = "#A2FAFA"; 
     count = 0; 
     console.log(count); 
    } 
} 

Я знаю, почему это не работает, но мне нужно написать это по-другому. Функция funtion изменяет цвет объекта на «# 000000» для splitsecond и переходит к следующему цвету: «# 7FFF00». Это не заканчивает функцию после первого «if». Как я могу переписать его по-другому?

Answer 1

гноиться является вполне корректным. Как улучшение, хотя, вы можете не повторять код, используя массив:

var count = 0; 
var colours = ["#000000", "#7FFF00", "#A2FAFA"]; 
function myFunction() { 
    count += 1; 
    if (count >= colours.length) { 
     count = 0; 
    } 

    character.style.backgroundColor = colours[count]; 
    console.log(count); 
} 

Answer 2

Статья продолжается, потому что вы не используете else if. Попробуйте это:

var count = 0; 
function myFunction() { 

    count++; 
    count = count % 3; 

    if (count == 0) character.style.backgroundColor = "#000000";  
    else if (count == 1) character.style.backgroundColor = "#7FFF00";  
    else character.style.backgroundColor = "#A2FAFA"; 
} 

Я добавил оператор по модулю, а также упростить код

Answer 3

вы можете цепи, если - то еще, чтобы убедиться, что он не будет выполнять любой код после выполнения, если заявление

var count = 0; 
function myFunction() { 
    if (count == 0) { 
     character.style.backgroundColor = "#000000"; 
     count = 1; 
     console.log(count); 
    } 
    else if (count == 1) { 
     character.style.backgroundColor = "#7FFF00"; 
     count = 2; 
     console.log(count); 
    } 
    else { 
     character.style.backgroundColor = "#A2FAFA"; 
     count = 0; 
     console.log(count); 
    } 
} 

Answer 4

Для этого вы должны использовать

if(count==0) { ... } 
else if(count==1) { ... } 
else { ... } 

Так функция должна б е

function myFunction() { 
    if (count == 0) { 
     character.style.backgroundColor = "#000000"; 
     count = 1; 
     console.log(count); 
    } 
    else if (count == 1) { 
     character.style.backgroundColor = "#7FFF00"; 
     count = 2; 
     console.log(count); 
    } 
    else { 
     character.style.backgroundColor = "#A2FAFA"; 
     count = 0; 
     console.log(count); 
    } 
} 

Лучше подход: Ответ

var count = -1; 
function myFunction() { 
     var color = ["#000000", "#7FFF00", "#A2FAFA"]; 
     character.style.backgroundColor = color[count>1?count:++count] ; 
}