Why doesn’t this program work in Chrome?

Asked

Viewed 65 times

0

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>          
    <fieldset><legend>Escolha</legend>
        <select>
            <optgroup label="Decimal" onclick="f_decimal()">
                <option onclick="carro()">Carro</option>
                <option onclick="moto()">Moto</option>
            </optgroup>     
        </select>   
    </fieldset> 
    <script>
        function carro(){
        alert("Você escolheu carro.")
        }
        function moto(){
        alert("Você escolheu moto.")
        }
    </script>
</html>
javascript html5

  • The proposal is as follows, you must choose an option in select, and a warning should appear showing the chosen option. (Works in browsers: Edge and Firefox, but not in Chrome).

  • 1

    @Muka149 http://webbugtrack.blogspot.com.br/2007/11/bug-280-lack-of-events-for-options.html . Use attributes data-type="carro" and the event onchange to identify the type of vehicle.

  • The right would be onchange in select, the click does not serve to select

  • 1

    Also not working in Opera, and IE11

  • You forgot to declare the <title></title> inside the head of your HTML. If you omit the tag <title> the document is not validated as an HTML file. Source: https://www.w3schools.com/tags/tag_title.asp

1 answer

2


The tag option contains the global HTML events and this includes the onclick(). For some reason this link may or may not work in some browsers. This is because the event is not used onclick() in the elements option and use the event onchange() on the tag select.

function mudou() {
  
  var valor = document.getElementById("teste").value;
  
  if(valor == "carro") {
    carro();
  }
  else if(valor == "moto") {
    moto();
  }
  
}

function carro(){
  alert("Você escolheu carro.")
}

function moto(){
  alert("Você escolheu moto.")
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Teste</title>
</head>
<body>          
    <fieldset><legend>Escolha</legend>
        <select id="teste" onchange="mudou()">
            <optgroup label="Decimal">
                <option value="carro">Carro</option>
                <option value="moto">Moto</option>
            </optgroup>     
        </select>   
    </fieldset> 
</html>

References:

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.