Я застрял в этом маленьком проекте метронома. Он должен вспыхивать между двумя цветами фона. Он отлично работает, пока определены оба цвета (переключите «col» в строке JS 12 на любой цвет, и он работает). Тем не менее, я также пытаюсь сделать так, чтобы я мог рандомизировать один из цветов onclick. Я могу сказать (console.log), что мой рандомизатор числа генерирует правильное значение гексагового цвета для моей переменной «col», но я не могу заставить эту переменную работать. Я пробовал «col» без кавычек. Что я делаю не так? Я довольно новичок в JS.Имея глупую проблему с глупой переменной. argh
Вот ссылка на codepen: http://codepen.io/Fedreg/pen/xVqwjQ/
http://codepen.io/Fedreg/pen/xVqwjQ/
<head></head>
<body>
<div id="title">
flashnome
</div>
<div id="desc">
the silent metronome
<p>
<button onclick="slower();" id="button1">
slower
</button>
<button onclick="faster();" id="button1">
faster
</button>
</p>
<p>
<button onclick="change();" id="button1">Change Color</button>
</p>
</div>
</body>
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
html, body {
height: 100%;
width:100%;
}
#title {
text-align: center;
color: white;
font-size: 5em;
font-family: 'Josefin Sans', sans-serif;
margin: auto;
text-transform: uppercase;
padding: 2em 0 .2em;
}
#desc {
text-align: center;
color: white;
font-size: 2em;
font-family: 'Josefin Sans', sans-serif;
margin: auto;
text-transform: uppercase;
padding: 0;
}
#button1 {
text-align: center;
font-size: .7em;
font-family: 'Josefin Sans', sans-serif;
margin: 0 auto;
text-transform: uppercase;
padding: 8px;
}
var x = 500;
var flashStep = 1;
var myInterval;
function change() {
var col = '#' + (Math.random().toString(16) + '000000').slice(2, 8);
console.log(col);
}
function flash() {
if (flashStep == 1) {
document.bgColor = "col";
flashStep = 2;
} else {
document.bgColor = "#333";
flashStep = 1;
}
}
function faster() {
window.clearInterval(myInterval);
myInterval = window.setInterval(flash, x -= 25);
}
function slower() {
window.clearInterval(myInterval);
myInterval = window.setInterval(flash, x += 25);
}
myInterval = window.setInterval(flash, x);
function change() {
var col = '#' + (Math.random().toString(16) + '000000').slice(2, 8);
console.log(col);
}
Спасибо за помощь! Не удалось выяснить, как изменить глобальную переменную col. Некоторые из основ JS все еще ускользают от меня. Очень ценю помощь !! – Fedreg
Вас приветствую. Пожалуйста, примите это как ответ, если он решит вашу проблему Thanx. Дайте мне знать, если возникнут вопросы. – Bikee