從Javascript寫入變量到HTML

Question

我有一些JavaScript和HTML來顯示鍵盤水龍頭的BPM值。在底部的HTML，我有一些腳本來獲得'simpleTempo'的形式JavaScript的值，並將其寫入到一個不可編輯的文本框中，但希望這是純文本，我可以用CSS分配樣式。如果你能幫助我 - 這將是非常感謝！

--------------------------- 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> 

Answer 1

有一個類似的帖子這個在：

Passing javascript variable to html textbox

基本上得到一個JavaScript值到你使用的getElementById

document.getElementById("simpleTempo").value = "some text";