var notes = ['do', 'do#', 're', 're#', 'mi', 'fa', 'fa#',
'sol', 'sol#', 'la', 'la#', 'si'
];
function stepUp() {
var text = document.getElementById('textarea');
if (typeof text.count == 'undefined') {
text.count = 0;
} else {
text.count++;
}
if (text.count == notes.length) {
text.count = 0;
}
text.innerHTML = notes[text.count];
}
function stepDown() {
var text = document.getElementById('textarea');
text.count--;
if (text.count == notes.length) {
text.count = 0;
}
if (text.count < 0) {
text.count = 11;
}
text.innerHTML = notes[text.count];
}
/* Load file*/
function load_song() {
var fileToLoad = document.getElementById("load_button").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("textarea").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}body {
font-family: Arial, sans-serif;
background-color: #333;
color: #ddd;
text-align: center;
}
container {
display: flex;
margin: 2vmin;
position: relative;
top: 3vmin;
}<div class="container">
<textarea id="textarea" rows="5" cols="50">---</textarea>
</div>
<button onclick="stepUp()" class="stepUp_Button">Up</button>
<button onclick="stepDown()" class="stepDown_Button">Down</button>
<!-- Load button -->
<span>Load File: </span>
<input type="file" id="load_button">
<button class="load_button" onclick="load_song()">Load</button>I would like to write in the textarea in random order the notes
"do do# re re# mi fa fa# sol sol# la la# si"
(or upload a .txt file with these notes written in random order
sol mi do# fa si etc)
and pressing the up button to raise them all +1,
i.e. do => do#
and by pressing the down button to decrease them all -1. do => si
While it seems to work for one note,
if I write in the textarea and press the up button it does not work at all, just as it does not work if I upload a simple .txt file.
Any ideas would be extremely helpful. Thanks!
