Question

我创建了一个JavaScript onclick函数。它在Firefox中运行良好。但在chrome / IE中，功能正常工作，除非您第一次单击它。我的代码在

之下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

function KeepCount() {

  var mytextbox = document.getElementById('onclickval1');
  var myform = document.getElementById('compare-meet');
  var inputElems = myform.getElementsByTagName("input");
  for (var i=0; i<inputElems.length; i++) {
    inputElems[i].onchange = function(){
        if(this.checked){

            mytextbox.value += this.value +",";
            s = document.getElementById("onclickval1").value;
            n = s.split(',').length;
            if (n > 5)
            {
                alert('Pick Just Four Please!')
                this.checked = false
                mytextbox.value = mytextbox.value.replace(this.value+",", "")
                document.comparepage; return false;
            }
            if (n < 3)
            {
                document.getElementById('compsend').disabled=true;
            }
            if (n > 2)
            {
                document.getElementById('compsend').disabled=false;
            }
        }else{
            mytextbox.value = mytextbox.value.replace(this.value+",", "");
            s = document.getElementById("onclickval1").value;
            n = s.split(',').length; 
            if (n < 3)
            {
                document.getElementById('compsend').disabled=true;
            }
            if (n > 2)
            {
                document.getElementById('compsend').disabled=false;
            }
        }
    }
  }
}
</script>
</head>

<body>
<form id="compare-meet" action="" name="comparepage" method="post">
<input id="onclickval1" type="text" value="" name="getval1" size="30">
<table id="datatable-1" class="views-table">
    <thead>
    <tr role="row"><th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="
                  ">
          <span id="compbutt"><input id="compsend" title="Select atleast 2 school to compare" disabled="" type="submit" value="Compare &amp; Meet" name="compare"></span>        </th></tr>
  </thead>

<tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="views-row-first odd">
                  <td class="">
            <input onclick="KeepCount()" class="5353" id="compare" type="checkbox"  value="5353">          </td>
              </tr><tr class="even">
                  <td class="">
            <input onclick="KeepCount()" class="5357" id="compare" type="checkbox"  value="5357">          </td>
              </tr><tr class="odd">
                  <td class="">
            <input onclick="KeepCount()" class="5533" id="compare" type="checkbox"  value="5533">          </td>
              </tr><tr class="even">
                  <td class="">
            <input onclick="KeepCount()" class="5793" id="compare" type="checkbox"  value="5793">          </td>
              </tr><tr class="odd">
                  <td class="">
            <input onclick="KeepCount()" class="5563" id="compare" type="checkbox"  value="5563">          </td>
              </tr></tbody></table>
</form>
</body>
</html>

Answer 1

keepCount()方法用于注册on change事件处理程序，因此您需要在文档加载时执行它，而不是单击input元素。

所以会发生什么是第一次点击发生时没有注册onchange事件处理程序，所以它不会被触发，然后它会注册一个onchange事件。当第二次点击发生时，你有一个onchange事件处理程序注册，所以它被解雇了这样做的问题是，当您继续执行KeepCount方法时，每次点击都会使onchange habdler多次触发

例如：

function KeepCount() {

    var mytextbox = document.getElementById('onclickval1');
    var myform = document.getElementById('compare-meet');
    var inputElems = myform.getElementsByTagName("input");
    for (var i=0; i<inputElems.length; i++) {
        inputElems[i].onchange = function(){
            if(this.checked){

                mytextbox.value += this.value +",";
                s = document.getElementById("onclickval1").value;
                n = s.split(',').length;
                if (n > 5)
                {
                    alert('Pick Just Four Please!')
                    this.checked = false
                    mytextbox.value = mytextbox.value.replace(this.value+",", "")
                    document.comparepage; return false;
                }
                if (n < 3)
                {
                    document.getElementById('compsend').disabled=true;
                }
                if (n > 2)
                {
                    document.getElementById('compsend').disabled=false;
                }
            }else{
                mytextbox.value = mytextbox.value.replace(this.value+",", "");
                s = document.getElementById("onclickval1").value;
                n = s.split(',').length; 
                if (n < 3)
                {
                    document.getElementById('compsend').disabled=true;
                }
                if (n > 2)
                {
                    document.getElementById('compsend').disabled=false;
                }
            }
        }
    }
}

window.onload = KeepCount;

从复选框中删除onclick="KeepCount()"

演示：Fiddle

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>
<form id="compare-meet" action="" name="comparepage" method="post">
<input id="onclickval1" type="text" value="" name="getval1" size="30">
<table id="datatable-1" class="views-table">
    <thead>
    <tr role="row"><th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="
                  ">
          <span id="compbutt"><input id="compsend" title="Select atleast 2 school to compare" disabled="" type="submit" value="Compare &amp; Meet" name="compare"></span>        </th></tr>
  </thead>

<tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="views-row-first odd">
                  <td class="">
            <input class="5353" id="compare" type="checkbox"  value="5353">          </td>
              </tr><tr class="even">
                  <td class="">
            <input class="5357" id="Checkbox1" type="checkbox"  value="5357">          </td>
              </tr><tr class="odd">
                  <td class="">
            <input  class="5533" id="Checkbox2" type="checkbox"  value="5533">          </td>
              </tr><tr class="even">
                  <td class="">
            <input class="5793" id="Checkbox3" type="checkbox"  value="5793">          </td>
              </tr><tr class="odd">
                  <td class="">
            <input class="5563" id="Checkbox4" type="checkbox"  value="5563">          </td>
              </tr></tbody></table>
</form>
</body>
<script>
    function KeepCount() {
        var mytextbox = document.getElementById('onclickval1');
        var myform = document.getElementById('compare-meet');
        var inputElems = myform.getElementsByTagName("input");
        for (var i = 0; i < inputElems.length; i++) {
            inputElems[i].onchange = function () {
                if (this.checked) {

                    mytextbox.value += this.value + ",";
                    s = document.getElementById("onclickval1").value;
                    n = s.split(',').length;
                    if (n > 5) {
                        alert('Pick Just Four Please!')
                        this.checked = false
                        mytextbox.value = mytextbox.value.replace(this.value + ",", "")
                        document.comparepage; return false;
                    }
                    if (n < 3) {
                        document.getElementById('compsend').disabled = true;
                    }
                    if (n > 2) {
                        document.getElementById('compsend').disabled = false;
                    }
                } else {
                    mytextbox.value = mytextbox.value.replace(this.value + ",", "");
                    s = document.getElementById("onclickval1").value;
                    n = s.split(',').length;
                    if (n < 3) {
                        document.getElementById('compsend').disabled = true;
                    }
                    if (n > 2) {
                        document.getElementById('compsend').disabled = false;
                    }
                }
            }
        }
    }
    KeepCount();
</script>
</html>

功能工作，除非你第一次点击它，铬

2 个答案: