javascript - OnClick event doesn't work in Chrome - Stack Overflow

admin管理员组

文章数量:1387422

i wrote following code to have a select list on my page:

<select id='defchtype' class='selectpicker form-control' style='width:80%;'>
    <option id='Pie' onClick='changechart(".$_GET['id'].",\"Pie\")'>Pie</option>
    <option id='Line' onClick='changechart(".$_GET['id'].",\"Line\")'>Line</option>
    <option id='Bar' onClick='changechart(".$_GET['id'].",\"Bar\")'>Bar</option>
    <option id='Odometer' onClick='changechart(".$_GET['id'].",\"Odometer\")'>Odometer</option>
    <option id='Radar' onClick='changechart(".$_GET['id'].",\"Radar\")'>Radar</option>
</select>

this is correctly work when i use mozilla firefox browser. but when i use google chrome browser the onclick event(changechart function) doesn't execute. how can i solve it? thanks this is part of my rendered html code:

<select id='defchtype' class='selectpicker form-control' style='width:80%;'>
        <option id='Pie' onClick='changechart(126,"Pie")'>Pie</option>
        <option id='Line' onClick='changechart(126,"Line")'>Line</option>
        <option id='Bar' onClick='changechart(126,"Bar")'>Bar</option>
        <option id='Odometer' onClick='changechart(126,"Odometer")'>Odometer</option>
        <option id='Radar' onClick='changechart(126,"Radar")'>Radar</option>
</select>

and this is my javascript function:

function changechart(id,chtype){
    var xmlhttp;
    if (window.XMLHttpRequest)
      {
          xmlhttp=new XMLHttpRequest();
      }
      else
      {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function()
      {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
              //response="server/img/useravatars/"+xmlhttp.responseText;
              response=xmlhttp.responseText;


            document.getElementById("chartcontainer").innerHTML=response;
              document.getElementById(chtype).selected="true";

          }
    }
    var req="showchart.php?id="+id+"&chtype="+chtype;
    xmlhttp.open("GET",req,true);
    xmlhttp.send(); 
}

the javascript function even doesn't execute in chrome. but in firefox work's correctly

i wrote following code to have a select list on my page:

<select id='defchtype' class='selectpicker form-control' style='width:80%;'>
    <option id='Pie' onClick='changechart(".$_GET['id'].",\"Pie\")'>Pie</option>
    <option id='Line' onClick='changechart(".$_GET['id'].",\"Line\")'>Line</option>
    <option id='Bar' onClick='changechart(".$_GET['id'].",\"Bar\")'>Bar</option>
    <option id='Odometer' onClick='changechart(".$_GET['id'].",\"Odometer\")'>Odometer</option>
    <option id='Radar' onClick='changechart(".$_GET['id'].",\"Radar\")'>Radar</option>
</select>

this is correctly work when i use mozilla firefox browser. but when i use google chrome browser the onclick event(changechart function) doesn't execute. how can i solve it? thanks this is part of my rendered html code:

<select id='defchtype' class='selectpicker form-control' style='width:80%;'>
        <option id='Pie' onClick='changechart(126,"Pie")'>Pie</option>
        <option id='Line' onClick='changechart(126,"Line")'>Line</option>
        <option id='Bar' onClick='changechart(126,"Bar")'>Bar</option>
        <option id='Odometer' onClick='changechart(126,"Odometer")'>Odometer</option>
        <option id='Radar' onClick='changechart(126,"Radar")'>Radar</option>
</select>

and this is my javascript function:

function changechart(id,chtype){
    var xmlhttp;
    if (window.XMLHttpRequest)
      {
          xmlhttp=new XMLHttpRequest();
      }
      else
      {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function()
      {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
              //response="server/img/useravatars/"+xmlhttp.responseText;
              response=xmlhttp.responseText;


            document.getElementById("chartcontainer").innerHTML=response;
              document.getElementById(chtype).selected="true";

          }
    }
    var req="showchart.php?id="+id+"&chtype="+chtype;
    xmlhttp.open("GET",req,true);
    xmlhttp.send(); 
}

the javascript function even doesn't execute in chrome. but in firefox work's correctly

• javascript
• html
• google-chrome
• firefox

Share Improve this question Follow edited Mar 15, 2015 at 1:59 Sirwan Rauofi asked Mar 15, 2015 at 1:47 Sirwan RauofiSirwan Rauofi 15211 gold badge33 silver badges1414 bronze badges 3

• 2 Can you post the rest of the changeChart code? – Miguel Commented Mar 15, 2015 at 1:48
• You need to post a plete code example, which in this case includes the JavaScript and the rendered HTML (not the PHP). – j08691 Commented Mar 15, 2015 at 1:50
• 2 You should be using the onchange event of the select, not the onclick of the options. See stackoverflow./questions/9972280/… – j08691 Commented Mar 15, 2015 at 2:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You should not use the onClick Event within option Elements. Use the onchange event of the select instead as already discussed in this question: javascript onclick alert not working in chrome .

本文标签： javascriptOnClick event doesn39t work in ChromeStack Overflow