计算填充的输入数

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

您需要为输入设置 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 2

您可以将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 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/