Vote count:
0
I'm sorry for asking a question that I'm sure is simple but I'm stuck. I have a project that requires the user to select 3 notes, the value for each should populate in the text box until the 3rd is entered. After that a compare is done to an array and a notification sent to the user letting them know if they have made a valid selection or not. The problem I'm having is getting all 3 to populate, each time I click a button it overwrites the existing value. I've tried to push them to an array but it only contains the current value, I've tried a loop but that populates the selection 3x. I'm sure I'm overlooking something simple but have not been able to figure out what it is. Can someone point me in the right direction? Thanks!
<!doctype html>
<html>
<head>
<title> Scope </title>
<meta charset="utf-8">
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
font-family: Helvetica, sans-serif;
}
div#container {
margin: auto;
width: 300px;
}
form {
margin-top: 20%;
}
form input[type="text"] {
font-size: 120%;
text-align: center;
}
form input[type="button"] {
background-color: lightblue;
font-size: 110%;
}
</style>
<script>
function addNote(event) {
var validChords = {
C: "CEG",
F: "FAC",
G: "GBD"
};
var note = event.target.value;
console.log(note);
var getNotes = [];
var noteDisplay = document.getElementById("notesDisplay");
var displayMessage = document.getElementById("message");
getNotes.push(note);
console.log(getNotes);
noteDisplay.value = getNotes;
noteDisplay.innterHTML = getNotes;
displayMessage.innterHTML = "Please Enter Antoher Note!";
//Code below is different things I've been playing with trying to
// figure this out.
// var success = false;
// if (notes.length > 0) {
// if (note) {
// for (var i =0; i < 3; i++) {
// if(notes[i] == note) {
// var found = true;
// getNotes.push(note);
// }
// }
// }
// }
// if (getNotes.length < 3) {
// }
}
window.onload = function() {
var notes = ["C", "D", "E", "F", "G", "A", "B"];
var cButton = document.getElementById("c");
cButton.onclick = addNote;
var dButton = document.getElementById("d");
dButton.onclick = addNote;
var eButton = document.getElementById("e");
eButton.onclick = addNote;
var fButton = document.getElementById("f");
fButton.onclick = addNote;
var gButton = document.getElementById("g");
gButton.onclick = addNote;
var aButton = document.getElementById("a");
aButton.onclick = addNote;
var bButton = document.getElementById("b");
bButton.onclick = addNote;
// your code here
}
</script>
</head>
<body>
<div id="container">
<form>
<p id="message">Enter a major triad chord:</p>
<p>
<input id="notesDisplay" type="text" size="21">
</p>
<p>
<input id="c" type="button" value="C">
<input id="d" type="button" value="D">
<input id="e" type="button" value="E">
<input id="f" type="button" value="F">
<input id="g" type="button" value="G">
<input id="a" type="button" value="A">
<input id="b" type="button" value="B">
</p>
</form>
</div>
</body>
</html>
asked 57 secs ago
JavaScript Scope - populating text box with multiple selections
Aucun commentaire:
Enregistrer un commentaire