如何使用 JavaScript 在屏幕上打印变量？答案

【问题标题】：How do I print a Variable on Screen with JavaScript?如何使用 JavaScript 在屏幕上打印变量？
【发布时间】：2014-05-15 13:07:43
【问题描述】：

我一直在研究计算器。每次操作需要地点，答案被提醒或console.log();。我想知道是否有是我可以在文本框中打印答案的任何脚本。
我正在使用<div>，这也导致我的页脚出现问题。如果我不要休息<br> 然后页脚会转到中心离开<div>。

HTML：

    <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BlackForest</title>
</head>

<body>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="main.css" >    

    <div class="jumbotron">
    <h1 class="span2"><kbd>BlackForest</kbd></h1>
    </div>

    <header>
        <ul class="nav nav-pills">
            <li class="active"><a class="btn btn-lg" href="#">Home</a></li>
            <li><a class="btn btn-lg" href="#" id="spacing">Profile</a></li>
            <li><a class="btn btn-lg" href="#" id="spacing">Messages</a></li>
        </ul>   
    </header>

    <!-- div start -->
        <div class="left">
                <h1 id="hbody">Calculator</h1>
                <form name="form" action="" method="POST">
                    Enter First Number: <br>
                    <input type="text" name="numone" value="">
                    <br>
                    <br>
                    Enter Second Number: <br>
                    <input type="text" name="numtwo" value="">
                    <br>
                    <br>
                    <input type="button" name="addition" value="Add" onClick="dataAdd(this.form)">
                    <input type="button" name="subtraction" value="Subtract" onClick="dataSubtract(this.form)">
                    <input type="button" name="multiply" value="Multiply" onClick="dataMultiply(this.form)">
                    <input type="button" name="division" value="Divide" onClick="dataDivide(this.form)">
                </form>
        </div>

    <center>
        <div class="right">
            <p class="lead"><strong><kbd>Login</kbd></strong></p><br>
            <div class="well">
                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1"><kbd>Email address</kbd></label>
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Email">
                    </div>

                    <div class="form-group">
                        <label for="exampleInputPassword1"><kbd>Password</kbd></label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter Password">
                    </div>
                    <button type="submit" class="btn btn-default btn-lg" id="buttoncolor"><strong>Login</strong></button>
                </form>
            </div>
        </div>
    </center>
    <!-- div end -->
        <script language="JavaScript">
    function dataAdd (form) {
        var jsnumone = form.numone.value;
        var jsnumtwo = form.numtwo.value;
        var jsSum = parseInt(jsnumone)+ parseInt(jsnumtwo);
        console.log("Sum: " + jsSum);
        alert(jsSum);
    }

    function dataSubtract (form) {
        var jsnumone = form.numone.value;
        var jsnumtwo = form.numtwo.value;
        var jsSub = jsnumone-jsnumtwo;
        console.log("Difference: " + jsSub);
        alert(jsSub);
    }

    function dataMultiply (form) {
        var jsnumone = form.numone.value;
        var jsnumtwo = form.numtwo.value;
        var jsMultiply = Math.abs(jsnumone*jsnumtwo);
        console.log("Product: " + jsMultiply);
        alert(jsMultiply);
    } 

    function dataDivide (form) {
        var jsnumone = form.numone.value;
        var jsnumtwo = form.numtwo.value;
        var jsDivide = Math.abs(jsnumone/jsnumtwo);
        console.log("Quotient: " + jsDivide);
        alert(jsDivide);
    }
</script>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <footer>
        <center>
            <p class="lead">&copy 2014 Tanishq Jain</p>
        </center>   
    </footer>



</body>
</html>

CSS 代码：

    body {
    background: #999;
    background-color: #999;
    margin: 10px;
    color: #333;
    text-decoration: none;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    margin: 0 auto;
}

body footer {
    color: #222;
    background: #999;
}
body h1 {
    color: #222;
    background: #999;
    margin: 0;
    padding-top: 0 !important;
    padding: 10px;
    background-color: #999;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

body h1:hover {
    outline: none;
}

div.left {
    width: 70%;
    padding-left: 10px;
    margin-left: 25px;
    float: left;
    color: #333;
    background: #999;
    border: 0;
    background-color: #999;
}

div.right {
    width: 30%;
    padding-left: 0 5px 0 0;
    float: right;
    color: #333;
    background: #999;
    background-color: #999;
    border: 0;
    font-size: 14px;

}

div.well {
    background: #999;
    border: 0;
}
div.jumbotron {
    background: #999;
    padding-top: 20px !important;
    margin-bottom: 0;
    padding-bottom: 30px;
}

div.form-group {
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

button.btn:hover {
    border-color: #777;
    background: linear-gradient(#acda44 0%, #689600 100%);

}

body header li a {
    margin-left: 45px;
    background-color: #444 !important;
    border-radius: 4px;
    color: white;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

body header li a:hover {
    color: white;
    border-color: #777;
    background: linear-gradient(#acda44 0%, #689600 100%);
    border-color: black;
    border: 3px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

#spacing {
    margin-left: 0;
}

#hbody {
    padding-top: 10px !important;
}

.lead {
    padding-left: 10px !important;
}

【问题讨论】：

您只需要获取元素并更新其 html。 document.getElementById('your_id').innerHTML="value";

标签： javascript html css

【解决方案1】：

在正文标签内创建文本输入

<input type="text" id="num_text"></input>

然后在javascript中执行以下操作

document.getElementById("num_text").innerHTML="whatever your text or number";

对于页脚部分，您可以查看http://css-tricks.com/snippets/css/sticky-footer/

【讨论】：

【解决方案2】：

HTML：

<input type="text" id="result" />

JAVASCRIPT：

var result = //get from calculation

document.getElementById("result").value=result; // Put result in input box

【讨论】：

【解决方案3】：

html

<inpur type="text" id= "resultText" />
<div id="resultDiv"></div>

javascript

var result = 5 +5;
document.getElementById("resultText").value=result; // result displays in textbox
document.getElementById("resultDiv").innerHTML=result; // result displays in div

jquery

var result = 5 +5;
$('#resultText').val(result); // result displays in textbox
$('#resultDiv').html(result);// result displays in div

为您的页脚尝试relative 属性，下面我给出了页脚的基本样式

<style>
    .footer {
        clear: both;
        position: relative;
        z-index: 10;
        height: 3em;
        margin-top: -3em;
    }
</style>
<div class="footer">footer content</div>

【讨论】：

CSS 不适用于我的页脚！它与我的 div 冲突。

【解决方案4】：

在制作第二个文本后制作第三个文本框

Answer: <br>
<input type="text" name="ans" value="">

现在在 javascript 中，您已经提醒答案编写代码

document.getElementById("ans").value==jsSum;

减法、乘法和除法类似。

document.getElementById("ans").value==jsSub;
document.getElementById("ans").value==jsMultiply;
document.getElementById("ans").value==jsDivide;

抱歉，页脚问题无法帮助您。

这是整个 HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BlackForest</title>
</head>

<body>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="main.css" >    

<div class="jumbotron">
<h1 class="span2"><kbd>BlackForest</kbd></h1>
</div>

<header>
    <ul class="nav nav-pills">
        <li class="active"><a class="btn btn-lg" href="#">Home</a></li>
        <li><a class="btn btn-lg" href="#" id="spacing">Profile</a></li>
        <li><a class="btn btn-lg" href="#" id="spacing">Messages</a></li>
    </ul>   
</header>

<!-- div start -->
    <div class="left">
            <h1 id="hbody">Calculator</h1>
            <form name="form" action="" method="POST">
                Enter First Number: <br>
                <input type="text" name="numone" value="" id="numone">
                <br>
                <br>
                Enter Second Number: <br>
                <input type="text" name="numtwo" value="" id="numtwo">
                <br>
                <br>
                Answer: <br>
                <input type="text" name="ans" value="" id="ans">
                <br>
                <br>
                <input type="button" name="addition" value="Add" onClick="dataAdd()">
                <input type="button" name="subtraction" value="Subtract" onClick="dataSubtract()">
                <input type="button" name="multiply" value="Multiply" onClick="dataMultiply()">
                <input type="button" name="division" value="Divide" onClick="dataDivide()">
            </form>
    </div>

<center>
    <div class="right">
        <p class="lead"><strong><kbd>Login</kbd></strong></p><br>
        <div class="well">
            <form role="form">
                <div class="form-group">
                    <label for="exampleInputEmail1"><kbd>Email address</kbd></label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Email">
                </div>

                <div class="form-group">
                    <label for="exampleInputPassword1"><kbd>Password</kbd></label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter Password">
                </div>
                <button type="submit" class="btn btn-default btn-lg" id="buttoncolor"><strong>Login</strong></button>
            </form>
        </div>
    </div>
</center>
<!-- div end -->
    <script language="JavaScript">
function dataAdd()
{
    n1=document.getElementById('numone').value;
    n2=document.getElementById('numtwo').value;
    document.getElementById('ans').value=parseInt(n1)+parseInt(n2);
}

function dataSubtract()
{
    n1=document.getElementById('numone').value;
    n2=document.getElementById('numtwo').value;
    document.getElementById('ans').value=parseInt(n1)-parseInt(n2);
}

function dataMultiply()
{
    n1=document.getElementById('numone').value;
    n2=document.getElementById('numtwo').value;
    document.getElementById('ans').value=parseInt(n1)*parseInt(n2);
}

function dataDivide()
{
    n1=document.getElementById('numone').value;
    n2=document.getElementById('numtwo').value;
    document.getElementById('ans').value=parseInt(n1)/parseInt(n2);
}
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<footer>
    <center>
        <p class="lead">&copy 2014 Tanishq Jain</p>
    </center>   
</footer>

【讨论】：

嘿，谢谢你的帮助，但值不会在那里打印。我照你说的做了。用你的 HTML 做了一个盒子，还放了 document.getElementById("ans").value==jsSum;在每个函数的末尾，但不会在其中打印任何内容。