我有两种改变bpm的方法，两者的工作方式基本相同，它们只是输入两种不同的方式。其中一个功能是工作，另一个是半工作。
如果您选择方法1，然后选择3次节拍，它将立即切换回4次节拍。但是，如果您使用方法2并选择3次节拍，它将保持3次节拍。
如果有人能够解释这种行为，那就太棒了！
/*
** Augie Luebbers & Toni Rigolosi
** Group 15
*/
//Take the button in our html and store it as a variable.
var runButton = document.getElementById('run-button');
//Create an event listener for the aforementioned button.
runButton.addEventListener('click', doWork, false);
/*
** For some reason when we created this second event
** beacuse without it, it was returning null value
** because it executed before the DOM fully loaded.
** More info: http://goo.gl/uUROPz , http://goo.gl/0Z1HdJ <-- Stack Overflow links
*/
window.onload=function()
{
/*
** After investing about 4 hours into the extra credit we realised
** that the method used to change between beats 3 and 4 was specific
** originally we had used a method of finding the value of an input field with the type number
** as we had so much time devoted, we didn't want to straight out remove it
** so we incorporated both and a method of switching between them
*/
var changeMethodButton = document.getElementById('changemethod-button');
changeMethodButton.addEventListener('click', changeBeatMenu, false);
};
function changeBeatMenu ()
{
//Clear the selection methods
document.getElementById('selectionMain').setAttribute("class", "hidden");
document.getElementById('changebeat-button1').setAttribute("class", "hidden");
document.getElementById('beats').setAttribute("class", "hidden");
document.getElementById('changebeat-button2').setAttribute("class", "hidden");
//make a variable with the value of the first radio button.
//We only need one because there are only two options and we are using an 'if else statement'
var radio = document.getElementById("beat-method-1").checked;
if (radio)
{
//Set the selection method to visible
document.getElementById('selectionMain').setAttribute("class", "visible");
document.getElementById('changebeat-button1').setAttribute("class", "visible");
//create an event for the new button for the selection method
var changeBeatButton1 = document.getElementById('changebeat-button1');
changeBeatButton1.addEventListener('click', changeBeat1, false);
} else {
//set the number method to visible
document.getElementById('beats').setAttribute("class", "visible");
document.getElementById('changebeat-button2').setAttribute("class", "visible");
//create an event for the new button for the number method
var changeBeatButton2 = document.getElementById('changebeat-button2');
changeBeatButton2.addEventListener('click', changeBeat2, false);
}
}
function changeBeat1 ()
{
//creates an object holding the selection input field
var dropDown = document.getElementById("selectionMain");
//creates a variable with the selected item in the field
var dropDownValue = dropDown.options[dropDown.selectedIndex].value;
//as we are changing between 3 and 4, we test to see if it equal 3
if (dropDownValue == 3)
{
//if it does, make the fourth element hidden
document.getElementById('beat-4').setAttribute("class", "hidden");
} else {
//but if it's not 3, it's 4 so...
//we put the fourth element back to it's default state which also happens to be visible
document.getElementById('beat-4').setAttribute("class", "beat inactive");
}
}
//Does the same thing as the above function..
//but it uses a number input field instead of a selection input field
function changeBeat2 ()
{
var beats = document.getElementById('beats');
beatsInteger = beats.value;
if (beatsInteger == 3)
{
document.getElementById('beat-4').setAttribute("class", "hidden");
} else {
document.getElementById('beat-4').setAttribute("class", "beat inactive");
}
}
//Create a timer based on input
function doWork ()
{
var timer = calcMs();
setInterval(function(){ oscillate(); }, timer);
}
//Calculate beats per millisecond
function calcMs ()
{
var bpm = document.getElementById('bpm');
var Ms = (60000/bpm.value);
return Ms;
}
//Oscillate the divs between 1 and 4.
var buffer = 0;
var beatsInteger = 4;
function oscillate ()
{
var i;
for (i = 1; i <= beatsInteger; i++)
{
document.getElementById('beat-' + i).setAttribute("class", "beat inactive");
}
var myBeat = buffer % beatsInteger + 1;
document.getElementById('beat-' + myBeat).setAttribute("class", "beat active");
buffer++;
}/*
** Augie Luebbers & Toni Rigolosi
** Group 15
*/
#header {
margin-bottom: 20px;
}
.beat {
width: 100px;
height: 50px;
margin-bottom: 20px;
padding: 10px;
text-align: center;
}
.inactive {
background-color: #d3d3d3;
border: 1px solid #000000;
}
.active {
background-color: #FFD1DC;;
border : 3px solid #FF0000;
}
.hidden {
visibility: hidden;
display: none;
}
.visible {
visibility: visible;
display: inline;
}<!--
--
-- Augie Luebbers & Toni Rigolosi
-- Group 15
--
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lab 3: Metronome</title>
<meta name="description" content="Project 3">
<link rel="stylesheet" href="css/metro.css">
</head>
<body>
<section id="header">
<h3>Metronome</h3>
<label for="bpm">BPM</label>
<input type="text" name="bpm" id="bpm" placeholder="enter bpm"/>
<button name="run-button" id="run-button">Start</button>
<br>
<label for="selection">SELECTION</label>
<input type="radio" name="beat-method" value="method-1" id="beat-method-1"> Method 1
<input type="radio" name="beat-method" value="method-2" id="beat-method-2"> Method 2
<button name="changemethod-button" id="changemethod-button">Submit</button>
<br>
<select id="selectionMain" class="hidden">
<option value="3">3</option>
<option value="4">4</option>
</select>
<button name="changebeat-button1" id="changebeat-button1" class="hidden">Change Beat</button>
<!-- or -->
<label for="beats" class="hidden">BEATS</label>
<input type="number" name="beat" id="beats" min="3" max="4" step="1" value="4" class="hidden">
<button name="changebeat-button2" id="changebeat-button2" class="hidden">Change Beat</button>
</section>
<div id="beat-1" class="beat inactive">One</div>
<div id="beat-2" class="beat inactive">Two</div>
<div id="beat-3" class="beat inactive">Three</div>
<div id="beat-4" class="beat inactive">Four</div>
<script src="js/app.js"></script>
</body>
</html>