想做一个累加计算的,改变内容就更新输出结果。
这样就方便使用,而不需要每次更改都点计算。
我是这样写的。网上搜的也基本是这样,还有onchange/change/oninput 这些都试过了,也是没用。------------------
document.getElementById('input').addEventListener('input', function() {//当输入框内容变化时重新计算
count();
}, false);
------------------
这样就方便使用,而不需要每次更改都点计算。
我是这样写的。网上搜的也基本是这样,还有onchange/change/oninput 这些都试过了,也是没用。------------------
document.getElementById('input').addEventListener('input', function() {//当输入框内容变化时重新计算
count();
}, false);
------------------
之前用的是jquery做的,但是我觉得为了做这样一个计算的就引入十几倍的jquery包,有点累赘。
但是我找不到方法
<script type="text/javascript">
document.getElementById('input').addEventListener('input', function() {//当输入框内容变化时重新计算
document.getElementById("text").innerHTML= 123 + parseFloat(this.value);
}, false);
function count() {
var i = parseInt(document.getElementById("input").value);
var a = i / 2;
if ( !isNaN(i) )
{
if (i < 0)
{
var sum = (1 - i) * a;
var tip1 = "-1";
var tip = "累减至";
}
else
{
var sum = (1 + i) * a;
var tip1 = "1";
var tip = "累加至";
}
document.getElementById("标题").innerHTML = tip1 + tip + i + "的结果为:";
document.getElementById("结果").innerHTML = sum;
}
else
{
document.getElementById("标题").innerHTML = "请输入数字";
document.getElementById("结果").innerHTML = "";
}
};document.getElementById('input').addEventListener('input', function() {//当输入框内容变化时重新计算
count();
}, false);
----------------------
功能都实现不liǎo了。
不是命名规不规范的问题了。。
你把html代码部分发一下,看看是不是元素id不对或id重名了。addEventListener方法和input事件要ie9才支持。ie8中无效。再看看html文件和js文件编码是否与页面中<meta charset="UTF-8" />声明的一致。
你把html代码部分发一下,看看是不是元素id不对或id重名了。addEventListener方法和input事件要ie9才支持。ie8中无效。再看看html文件和js文件编码是否与页面中<meta charset="UTF-8" />声明的一致。
HTML部分
-------------------
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="./js/scripts.js"></script>
<title>累加运算</title>
</head>
<body>
<div id="wrap">
<input type="text" id="input" value="" placeholder="在此输入整数"/>
<h1 id="标题"></h1>
<p id="结果"></p>
</div>
</body>
</html>
-------------------CSS部分-------------------
*
{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
margin: 0 auto;
width: 100vw;
text-align: center;
}
h1{
display: inline;
font-size: 50px;
color: SkyBlue;
}
p{
display: inline;
color: YellowGreen;
font-size: 50px;
}
#input{
display: block;
position: relative;
margin: 200px auto;
width: 700px;
height:100px;
font-size: 50px;
line-height: 100px;
text-align: center;
border: 0.5px solid #000;
}
-------------------
你把html代码部分发一下,看看是不是元素id不对或id重名了。addEventListener方法和input事件要ie9才支持。ie8中无效。再看看html文件和js文件编码是否与页面中<meta charset="UTF-8" />声明的一致。
我用的是手机上的 AIDEWeb所建的工程来写的
编码应该没问题
要把script放在页面body标签的最下面,或者使用window.onload事件(页面加载完成后触发)才可以。