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

如何使用JavaScript在屏幕上打印变量？
javascript html css
如何使用JavaScript在屏幕上打印变量？,javascript,html,css,Javascript,Html,Css,我一直在做计算器。每次手术需要放置时，应答会收到警报或在console.log（）中。我想知道是否有是任何我可以在文本框中打印答案的脚本我正在使用，这也导致了我的页脚出现问题。如果我不要打断，然后页脚会转到页面的中心左 HTML： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Comp
我一直在做计算器。每次手术需要放置时，应答会收到警报或在
console.log（）中。我想知道是否有
是任何我可以在文本框中打印答案的脚本
我正在使用，这也导致了我的页脚出现问题。如果我
不要打断
，然后页脚会转到页面的中心
左

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>

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

在body标记内创建文本输入
<input type="text" id="num_text"></input>

对于页脚部分，您可以查看HTML：
<input type="text" id="result" />

在生成第二个文本后生成第三个文本框
Answer: <br>
<input type="text" name="ans" value="">

同样地，减法、乘和除也要这样做
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>


黑森林
黑森林





计算器
输入第一个数字：





输入第二个数字：





回答：





登录
电子邮件地址
密码
登录
函数dataAdd（）
{
n1=document.getElementById（'numone'）。值；
n2=document.getElementById（'numtwo'）。值；
document.getElementById（'ans'）。value=parseInt（n1）+parseInt（n2）；
}
函数dataSubtract（）
{
n1=document.getElementById（'numone'）。值；
n2=document.getElementById（'numtwo'）。值；
document.getElementById（'ans'）。value=parseInt（n1）-parseInt（n2）；
}
函数dataMultiply（）
{
n1=document.getElementById（'numone'）。值；
n2=document.getElementById（'numtwo'）。值；
document.getElementById（'ans'）。value=parseInt（n1）*parseInt（n2）；
}
函数dataDivide（）
{
n1=document.getElementById（'numone'）。值；
n2=document.getElementById（'numtwo'）。值；
document.getElementById（'ans'）。value=parseInt（n1）/parseInt（n2）；
}
















































复制2014年Tanishq Jain



html
<inpur type="text" id= "resultText" />
<div id="resultDiv"></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>


.页脚{
明确：两者皆有；
位置：相对位置；
z指数：10；
高度：3em；
边缘顶部：-3em；
}
页脚内容
只需获取元素并更新其html即可<代码>文档.getElementById（'your_id'）.innerHTML=“value”CSS对我的页脚不起作用！它与我的div冲突。嘿，谢谢你的帮助，但是值不会在那里打印。我照你说的做了。通过HTML创建一个框，并放置文档。getElementById（“ans”）。value==jsSum；在每个函数的末尾，但没有任何内容会在其中打印。
<inpur type="text" id= "resultText" />
<div id="resultDiv"></div>

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

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

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