Question

我在表单上有4个输入，我想根据填充的输入数量进行计算。我想出了这个，它可以在IE中运行，但不适用于FF。 FF似乎不喜欢多个document.getElementById。任何帮助将不胜感激。

<script type="text/javascript" language="javascript">
function countlines(what) {
var headline = 1 ;
var oneline = 1 ;
var twoline = 1 ;
var webline = 1 ;

var valhead = document.getElementById('adverttexthead').value;
if (/^\s*$/g.test(valhead) || valhead.indexOf('\n') != -1)
{var headline = 0};

var valone = document.getElementById('adverttextone').value;
if (/^\s*$/g.test(valone) || valone.indexOf('\n') != -1)
{var oneline = 0};

var valtwo = document.getElementById('adverttexttwo').value;
if (/^\s*$/g.test(valtwo) || valtwo.indexOf('\n') != -1)
{var twoline = 0};

var valweb = document.getElementById('adverttextweb').value;
if (/^\s*$/g.test(valweb) || valweb.indexOf('\n') != -1)
{var webline = 0};

(document.getElementById('webcost').value = "$" + ((headline + oneline + twoline + webline) * 16.50).toFixed(2));
(document.getElementById('totallines').value = headline + oneline + twoline + webline);
}
</script>

HTML

<input name="adverttexthead" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)"> 
<br>
<input name="adverttextone" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)"> 
<br>
<input name="adverttexttwo" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">
<br>
<input name="adverttextweb" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">


<input name="totallines" id="totallines" size="4" readonly="readonly" type="text">
<input name="webcost" id="webcost" size="6" readonly="readonly" type="text">

Answer 1

您可以将inputs放在form中并按照这样做：

function countFormElements(formNumber){
  var fn = !formNumber ? 0 : formNumber;
  var frm = document.getElementsByTagName('form')[fn], n = 0;
  for(var i=0,l=frm.length; i<l; i++){
    if(frm.elements[i].value !== '')n++;
  }
  return n;
}
console.log(countFormElements());

Answer 2

您需要为输入和名称设置id属性，否则getElementById在浏览器中的工作方式不一致。

例如：

<input id="adverttexthead" name="adverttexthead" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">

（技术上name对于document.getElementById来说是可选的，因为id被普遍接受，但您可能希望保留它以便正确提交表单。）

有关详细信息，请参阅：Document.getElementById() returns element with name equal to id specified

Answer 3

您没有在某些元素上设置'id'属性
您在'if'子句中重新初始化了变量。

工作代码：

<input id="adverttexthead" name="adverttexthead" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">
<br>
<input id="adverttextone" name="adverttextone" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">
<br>
<input id="adverttexttwo" name="adverttexttwo" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">
<br>
<input id="adverttextweb" name="adverttextweb" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">
<input id="totallines" name="totallines" size="4" readonly="readonly" type="text">
<input id="webcost" name="webcost" size="6" readonly="readonly" type="text">

function countlines(what) {
    var headline = 1;
    var oneline = 1;
    var twoline = 1;
    var webline = 1;

    var valhead = document.getElementById('adverttexthead').value;
    if (/^\s*$/g.test(valhead) || valhead.indexOf('\n') != -1) {
        headline = 0
    };

    var valone = document.getElementById('adverttextone').value;
    if (/^\s*$/g.test(valone) || valone.indexOf('\n') != -1) {
        oneline = 0
    };

    var valtwo = document.getElementById('adverttexttwo').value;
    if (/^\s*$/g.test(valtwo) || valtwo.indexOf('\n') != -1) {
        twoline = 0
    };

    var valweb = document.getElementById('adverttextweb').value;
    if (/^\s*$/g.test(valweb) || valweb.indexOf('\n') != -1) {
        webline = 0
    };

    (document.getElementById('webcost').value = "$" + ((headline + oneline + twoline + webline) * 16.50).toFixed(2));
    (document.getElementById('totallines').value = headline + oneline + twoline + webline);
}

这是一个有效的jsFiddle：http://jsfiddle.net/YC6J7/1/

计算填充的输入数量

3 个答案: