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

时间：2014-05-13 05:28:43

标签： javascript html css

  1. 我一直在研究计算器。每次操作都需要 地方，回答得到警报或在console.log();。我想知道是否有 是我可以在文本框中打印答案的任何脚本。

  2. 我正在使用<div>，这也导致我的页脚出现问题。如果我 不要休息<br>然后页脚会到达中心 离开<div>。

    3. 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;
}

4 个答案:

答案 0 :(得分：0)

在body标签内创建文本输入

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

答案 1 :(得分：0)

HTML：

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

JAVASCRIPT：

var result = //get from calculation

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

答案 2 :(得分：0)

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

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>

答案 3 :(得分：0)

<强> 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>
相关问题
最新问题