2016-03-24 5 views
2

Я застрял в этом маленьком проекте метронома. Он должен вспыхивать между двумя цветами фона. Он отлично работает, пока определены оба цвета (переключите «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); 
} 

ответ

1

сделать глобальную переменную с именем "randomColor" и изменить его.

var x = 500; 
    var flashStep = 1; 
    var myInterval; 
    var randomColor = "#FFFF00"; 

function change() { 
var col = '#' + (Math.random().toString(16) + '000000').slice(2, 8); 
    randomColor = col; 
    console.log(col); 
} 

function flash() { 
    if (flashStep == 1) { 
    document.bgColor = randomColor; 
    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); 
+0

Спасибо за помощь! Не удалось выяснить, как изменить глобальную переменную col. Некоторые из основ JS все еще ускользают от меня. Очень ценю помощь !! – Fedreg

+0

Вас приветствую. Пожалуйста, примите это как ответ, если он решит вашу проблему Thanx. Дайте мне знать, если возникнут вопросы. – Bikee

0

Во-первых, вы написали функцию изменения() дважды. Затем внутри него вы используете ключевое слово var, что делает переменную локальной внутри функции change() - ничего снаружи этой функции имеет доступ к col.

Просто определите col как глобальный, над функцией change(). При ссылке на него, не заключить в кавычки - это делает его строкой (буквальное значение «col»).

Итак:

var col = false; 

function change(){ 
    col = '#F11'; 
} 

change(); 

document.bgColor = col; 
+0

Спасибо за помощь !!! Функция double change() была просто проблемой копирования/вставки при отправке вопроса. Я думал, что это проблема с областью, но мои попытки исправить это не помогли. Действительно ценю это! – Fedreg

1
function change() { 
    var col = '#' + (Math.random().toString(16) +  '000000').slice(2, 8); 
    console.log(col); 

    return col; 
} 

function flash() { 
    if (flashStep == 1) { 
    document.bgColor = change(); 
    flashStep = 2; 
    } else { 
    document.bgColor = "#333"; 
    flashStep = 1; 
    } 
} 

Вы можете избежать использования глобальной переменной с помощью "возврата" в "изменении) (" функции и затем вызвать изменение() Int функции вспышки(). Это немного «лучше», чем использование глобальных переменных

+0

Спасибо! Я пытался найти способ использовать возвращенный столбец, но не пытался установить bgColor = change(), как вы это делали. Многое, чтобы учиться, но я нахожу, что я поглощаю его лучше, забивая проекты вместе и работая над своими ошибками, поэтому очень ценю помощь. – Fedreg

Смежные вопросы