0

I have some javascript and HTML to display the BPM values of a keyboard tap. On the HTML at the bottom, i have some script to get the value of 'simpleTempo' form JAVASCRIPT and write it into a non editable text box however want this to be plain text which I can assign styles with CSS to. If you could help me - it would be really appreciated!

---------------------------JAVSCRIPT---------------------------

// JavaScript Document/* 

"use strict";


var startTime;
var beatTimes;
var xsum, xxsum, ysum, yysum, xysum;
var periodprev, aprev, bprev;
var isDone;

init();


function init() {
    startTime = null;
    beatTimes = [];
    xsum  = 0;
    xxsum = 0;
    ysum  = 0;
    yysum = 0;
    xysum = 0;
    isDone = false;
    document.onkeydown = doBeat;
}


function doBeat() {
    if (!isDone)
        countBeat(new Date().getTime());
    return true;
}


function countBeat(currTime) {
    // Coordinates for linear regression
    if (startTime == null)
        startTime = currTime;
    var x = beatTimes.length;
    var y = currTime - startTime;

    // Add beat
    beatTimes.push(y);
    var beatCount = beatTimes.length;
    setValue("simpleBeats", beatCount);
    setValue("simpleTime", floatToString(y / 1000, 3));

    // Regression cumulative variables
    xsum  += x;
    xxsum += x * x;
    ysum  += y;
    yysum += y * y;
    xysum += x * y;

    var tempo = 60000 * x / y;
    if (beatCount < 8 || tempo < 190)
        setValue("simplePosition", Math.floor(x / 4) + " : " + x % 4);
    else  // Two taps per beat
        setValue("simplePosition", Math.floor(x / 8) + " : " + Math.floor(x / 2) % 4 + "." + x % 2 * 5);

    if (beatCount >= 2) {
        // Period and tempo, simple
        var period = y / x;
        setValue("simpleTempo", floatToString(tempo, 2));
        setValue("simplePeriod", floatToString(period, 2));

        // Advanced
        var xx = beatCount * xxsum - xsum * xsum;
        var yy = beatCount * yysum - ysum * ysum;
        var xy = beatCount * xysum - xsum * ysum;
        var a = (beatCount * xysum - xsum * ysum) / xx;  // Slope
        var b = (ysum * xxsum - xsum * xysum) / xx;  // Intercept
        setValue("advancedPeriod", floatToString(a, 3));
        setValue("advancedOffset", floatToString(b, 3));
        setValue("advancedCorrelation", floatToString(xy * xy / (xx * yy), 9));
        setValue("advancedTempo", floatToString(60000 / a, 3));

        // Deviations from prediction
        if (beatCount >= 3) {
            setValue("simpleLastDev"  , floatToString(periodprev * x - y, 1));
            setValue("advancedStdDev" , floatToString(Math.sqrt(((yy - xy * xy / xx) / beatCount) / (beatCount - 2)), 3));
            setValue("advancedLastDev", floatToString(aprev * x + bprev - y, 1));
        }

        periodprev = period;
        aprev = a;
        bprev = b;
    }
}


function done() {
    isDone = true;
    setValue("simplePosition" , "");
    setValue("simpleLastDev"  , "");
    setValue("advancedLastDev", "");
}


// d: Number of decimal places
function floatToString(x, d) {
    if (x < 0)
        return "-" + floatToString(-x, d);
    var m = Math.pow(10, d);
    var tp = Math.round(x % 1 * m);
    var s = "";
    for (var i = 0; i < d; i++) {
        s = tp % 10 + s;
        tp = Math.floor(tp / 10);
    }
    return Math.floor(Math.round(x * m) / m) + "." + s;
}


function setValue(elemId, val) {
    document.getElementById(elemId).value = val;
}

---------------------------HTML---------------------------

        <form action="#" method="get" onsubmit="return false" onreset="init()">

<input id="simpleTempo" action="#" method="get"/>
<input id="simpleBeats" readonly="readonly" type="hidden" />
<input id="simplePosition" readonly="readonly" type="hidden"/>
<input id="simpleTime" readonly="readonly" type="hidden"/>
<input id="advancedStdDev" readonly="readonly" type="hidden"/>
<input id="advancedOffset" readonly="readonly" type="hidden"/>
<input id="advancedCorrelation" readonly="readonly" type="hidden"/>
<input id="simpleLastDev" readonly="readonly" type="hidden"/>
<input id="advancedLastDev" readonly="readonly" type="hidden"/>
<input id="simplePeriod" readonly="readonly" type="hidden"/>
<input id="advancedPeriod" readonly="readonly" type="hidden"/>
<input id="simpleTempo" readonly="readonly" type="hidden"/>

<input type="reset" alt="reset" class="imgClass"/>
</form>

<script type="application/javascript" src="tap-to-measure-tempo.js"></script>
0

1 Answer 1

0

There is a similar post to this at:

Passing javascript variable to html textbox

Basically to get a JavaScript value into a html textbox you use getElementById

document.getElementById("simpleTempo").value = "some text";
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.